※本ページではアフィリエイトリンク(PR)が含まれています※

HTML入門

4章.HTMLでフォームを実装する

この記事ではHTMLでフォームを実装する方法を説明します。フォームを作成することでユーザが入力した情報をサーバーに送ることができます。

チェックボックス

<input>タグのcheckboxを利用することでチェックボックスを実装できます。

A
B
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
ラジオボタン1
ラジオボタン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">