1-1. フォームや表示領域をHTMLで作る
まずは、HTMLで入力欄と文字数表示領域を作ります。 これはとても簡単で、下記のようにtextarea要素とp要素を使うだけです。
※試しに使ってみるだけなら、何も書き換えずにコピー＆ペーストするだけで使えます。
<p id="inputlength1">0文字</p>
●<textarea cols="桁数" rows="行数"></textarea>
複数行の入力欄は、textarea要素で作れます。cols属性は横幅（桁数）、rows属性は高さ（行数）の指定です。 開始タグと終了タグの間には何も入れないようにします。
●<textarea …… onkeyup="スクリプト">
入力と同時にJavaScriptを実行するために、「onkeyup」属性を記述しています。 onkeyupは、「キーボードのキーが一度押し込まれてから、離された瞬間」に処理を行うためのイベントハンドラです。 これを使うことで、「何か文字が入力された直後（もしくは消された直後）」にスクリプトを実行することができます。
●<p id="ID名">0文字</p>
textarea要素の後に、「0文字」と書かれているp要素を記述します。
ここに、文字数のカウント結果を出力するようにします。 JavaScriptで内容を変更させるため、id属性を使ってID名「inputlength1」を付けています。このID名には自由な名称を付けて構いません。 同一ページ内の他のID名と重複しないように注意して下さい。
※複数個表示させる場合は、それぞれ異なるID名にします。
●onkeyup="ShowLength( 'ID名' , value );"
onkeyup属性で呼び出している「ShowLength」という関数は、次のページで作ります。
ShowLength関数の引数には、「'inputlength1'」と「value」の2つの値を渡しています。
最初の「inputlength1」は、p要素のid属性の値と必ず一致させます。 また、引用符（シングルクオーテーション）で囲むのを忘れないで下さい。 この部分を間違えると正しく動きません。
2つ目の引数「value」は、修正不要です。このまま記述して下さい。この「value」は、この入力欄に入力されたテキスト全部を指しています。 （文字数をカウントさせるために関数に渡しています。）
上記のHTMLを表示させると、以下のように見えます。
現状では、実行するスクリプトを記述していないので、入力しても表示は変化しません。（ブラウザによっては、エラーメッセージが表示されます。）
0文字
なお、複数行入力欄ではなく、1行入力欄を作る場合は、textarea要素の代わりにinput要素を使って、以下のように記述します。
<p id="inputlength2">0文字</p>
textarea要素の代わりにinput要素を使う点以外は、すべて同じです。
textarea要素もinput要素も両方使う場合や、同一ページ内に複数個使う場合は、必ずID名を異なるものにします。 （ID名さえ変えれば、いくつでも使えます。）
上記のHTMLを表示させると、以下のように見えます。
現状では、実行するスクリプトを記述していないので、入力しても表示は変化しません。（ブラウザによっては、エラーメッセージが表示されます。）
0文字
HTMLの記述は以上です。
次に、JavaScriptを記述しましょう。
