この記事ではHTMLでフォームを実装する方法を説明します。フォームを作成することでユーザが入力した情報をサーバーに送ることができます。
チェックボックス
<input>タグのcheckboxを利用することでチェックボックスを実装できます。
AB
C
<input type="checkbox" name="checkname" value="a">A<br>
<input type="checkbox" name="checkname" value="b">B<br>
<input type="checkbox" name="checkname" value="c">C<br>
テキストエリア
<textarea>を使用することでテキストボックスを実装することができます。
<textarea rows="10" cols="30" name="comment"></textarea>
フォームタグでサーバーに情報を送る
上記タグを実装するだけではユーザーが入力した情報をサーバーへ送ることができません。
<form>タグで<input>タグを囲い、submit属性のボタンを作成することにより実装できます。
<form method="post" action="http://〜〜〜">
性:
<input type="text" name="sei">
<br/>
名:
<input type="text" name="mei">
<br/>
<input type="submit" value="Submit">
</form>
そのほかのinputタグの活用
inputタグは上記でも、さまざまな入力フォームを実装します。
数値のみが設定できる項目
inputタグのtype属性に’number’を設定することにより、数値のみが入力可能なフォームを実装できます。
<input type="number" name="num" />
レンジの設定ができる項目
inputタグのtype属性に’range’を設定することにより、レンジバーによる入力が可能なフォームを実装できます。
<input type="range" name="num" min="0" max="10" step="0.1">
テキストが入力できる項目
inputタグのtype属性に’text’を設定することにより、テキスト入力する項目を実装できます。name属性に任意の文字列を設定することにより、サーバー側でkye-value形式でユーザーが入力した項目にアクセスすることができます。
<input type="text" name="seimei">
ラジオボタン項目
inputタグのtype属性に’radio’を設定することにより、ラジオボタンを実装できます。
<input name="delivery_option" type="radio" value="a" />ラジオボタン1<br/>
<input name="delivery_option" type="radio" value="b" />ラジオボタン2
ラジオボタン2
パスワード項目
inputタグのtype属性に’password’を設定することにより、パスワード入力項目を実装できます。
入力した情報は第三者に見られないように●によってマスキングされて表示されます。
<input type="password" name="password" />
プルダウンを実装
<select>タグでプルダウンを実装できます。
プルダウンの選択項目は<option>タグ設定可能です。
<select name="size">
<option value="dail">大</option>
<option value="tyuu">中</option>
<option value="syou">小</option>
</select>
入力可能なプルダウンを実装する
<datalist>タグを使用することで入力可能なプルダウンを実装できます。
入力フォームにあらかじめ設定した選択肢を入力すると、入力した文字列を含む選択肢を絞って提示してくれます。
<input list="fruits">
<datalist id="fruits">
<option value="みかん" />
<option value="メロン" />
<option value="バナナ" />
</datalist>
さまざまな属性の設定方法
必須入力の項目を作成
<input>タグにrequiredを設定すると、必須項目として設定されます。
<input type="password" name="password" required >
数値の最大入力文字数の設定
<input>タグのnumberタイプの入力項目にmaxを設定すると、入力文字数の最大値を設定できます。
<input type="number" max="10">
テキストの最大入力文字数の設定
<input>タグのtextタイプの入力項目にmaxlengthを設定すると、入力文字数の最大値を設定できます。ちなみに最小値はminlengthで設定可能です。
<input type="text" name="poem" maxlength="100">