フォーム

フォームとはボタンやテキストボックスのことを指します。<form> ～ </form> を記述してその中に入力フィールド等を記述します。

フォームの要素にアクセスする（書き換えたり、取得する）には、主に name 属性や id 属性を指定します。フォームにアクセスする方法

フォームから CGI に送信する場合は、action="???" として action 値に送信先の URL を指定します。そして method="???" として method 値に送信方法（通常は POST か GET）を記述します。method 値を指定しない場合は通常 GET として渡されます。

なお、JavaScript のみに使用する場合はフォームの内容を送信することはないので、<form action="#"> として action 値を記述しても良いと思います。（ここでは記述していません）

テキストボックス

<form name="form1">
<input type="text" name="text1" value="文字が書けるよ">
<input type="text" name="text2" value="" size="30" maxlength="5">
</form>

input type="text" として、value に初めから表示させたい文字を指定します。不要のときは value="" とします。size を追加すると、テキストボックスの大きさが指定できます。また、maxlength を追加すると最大文字数を指定できます。

パスワードボックス

<form name="form1">
<input type="password" name="pass1">
</form>

リセットボタン

<form name="form1">
<input type="text" name="text1" value="">
<input type="reset" value="取り消し">
</form>

テキストエリア

<form name="form1">
<textarea name="area1" cols="20" rows="5"></textarea>
</form>

複数行のテキストを表示するフォームを作ります。cols は幅、rows は行です。はじめから文字を表示させるには、<textarea> ～ </textarea> に任意の文字を記述します。

ボタン

<form name="form1">
<input type="button" value="押して">
</form>

送信ボタン

<form action="#">
<input type="submit" value="送信">
</form>

主に submit は、action 値に指定してある URL にフォームの内容を送信する場合に使用しますので、JavaScript のみの使用では送信することはないのであまり使われません。

ラジオボタン

<form name="form1">
<input type="radio" name="radio1" value="">
</form>

チェックボックス

<form name="form1">
<input type="checkbox" name="check1" value="">
</form>

セレクトボックス（ドロップダウンメニュー、プルダウンメニュー）

<form name="form1">
<select name="select1">
<option value="0">選べます
<option value="1">その1
<option value="2">その2
<option value="3">その3
</select>
<select name="select2" size="5">
<option value="0">選べます
<option value="1">その1
<option value="2">その2
<option value="3">その3
</select>
<select name="select3" size="5" multiple>
<option value="0">選べます
<option value="1">その1
<option value="2">その2
<option value="3">その3
</select>
</form>

select の size は、指定しなければ size="1" です。サイズ指定すると縦にその分表示されます。このときに multiple 属性をつけると複数選択が可能になります。選択できるリストは <option> を追加した分だけ増えます。option の終了タグ (</option>) は省略可能です。

最初から選択状態にする

<form name="form1">
<input type="radio" name="radio1" value="" checked>
<input type="checkbox" name="check1" value="" checked>
<select name="select1">
<option value="0">選べます
<option value="1">その1
<option value="2" selected>その2
<option value="3">その3
</select>
</form>

ラジオボタンとチェックボックスは checked、セレクトボックスは selected とすると最初から選択状態にすることができます。

読み取り専用にする

<form name="form1">
<textarea name="area1" cols="20" rows="5" readonly>おはよう</textarea>
<input type="text" name="text1" value="こんにちは" readonly>
</form>

readonly 属性をつけると読み取り専用にして編集をできなくすることができます。

フォームの readonly を解除するには

javascript:for(var%20i=0;i<document.forms.length;i++)
for(var%20j=0;j<document.forms[i].elements.length;j++)document.forms[i].elements[j].readOnly=false;void(0);

上記のスクリプトを1行にまとめてブラウザのアドレスバーに入力することで解除することもできます。

無効にする

<form name="form1">
<textarea name="area1" cols="20" rows="5" disabled>おはよう</textarea>
<input type="text" name="text1" value="こんにちは" disabled>
<input type="radio" name="radio1" value="" disabled>
<input type="checkbox" name="check1" value="" disabled>
<select name="select1" disabled>
<option value="0">選べます
<option value="1">その1
<option value="2">その2
<option value="3">その3
</select>
<input type="button" value="ボタン" disabled>
</form>

フォームの disabled を解除するには

javascript:for(var%20i=0;i<document.forms.length;i++)
for(var%20j=0;j<document.forms[i].elements.length;j++)document.forms[i].elements[j].disabled=false;void(0);

上記のスクリプトを1行にまとめてブラウザのアドレスバーに入力することで解除することもできます。つまり、フォームを無効化していてもユーザーによって解除することができますので注意が必要です。