HTMLで作る入力フォームの作り方まとめ/form、inputタグの使い方

HTMLで作ることができる入力フォームの作り方をある程度まとめました。データをサーバー側に送付などの制御は、サーバー側での制御が必要となります。

入力フォーム作成の宣言

入力フォームを作成する時は、まずformタグで「場」を整えます。formタグの中に各入力フォーム・送信ボタンを記述していきます。

入力フォームの作成
<form></form>

データを送付したいURLがある場合は、action属性に記述します。

<form action = "uri">
...
</form>

テキストボックスの作成
<input type = “text”>

ごく基本的なテキスト入力フォームを作ることができます。inputタグはタグを閉じる必要はなく、単体で機能します。入力できる行は1行までですが、inputタグを打つと自動的に文字入力機能が実装されます。
入力した文章を取得して何かに使いたい場合は、name属性を付与する必要があります。

<input type = "text" name = "txt-box">

アドレス入力欄の作成
<input type = “email”>

inputタグのtypeを切り替えることで、「何を入力するための欄か」をブラウザに伝えることができます。やはり行は1行までで、入力した内容は、name属性で取得します。

<input type = "email" name = "email-box">

パスワード入力欄の作成
<input type = “password”>

こちらはパスワード専用。デフォルトで文字が伏字になりますが、この表記は切り替えることが可能です。

<input type = "password" name = "pw-box">

テキストエリアの作成
<textarea></textarea>

改行可能なテキストエリアを作成することができます。入力した文章を取得したい場合は、name属性を付与します。rowsで入力欄の行数、colsで入力幅の指定が可能です。

<textarea name = "txt-area" rows = "10" cols = "50" ></textarea>

プルダウンリストの作成
<select><option></option>..</select>

プルダウンなどから任意の内容を選ばせるセレクトボックスです。selectタグの中に任意の回数optionタグを埋め込むことで内容を記述できます。入力した文章を取得したい場合は、name属性を付与します。

<select name = "abc">
<option>a</option>
<option>b</option>
<option>c</option>
</select>

送信ボタンの作成
<input type = “submit”>

最後に、入力したデータをサーバーに送信するための送信ボタンです。value属性の値がボタン上に表示されます。

<input type = "submit" value = "送信"></input>

ちなみに、buttonにtype=”submit”などでも作成できます。この場合は閉じタグが必要になります。

<button type="submit">送信</button>