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

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

入力フォーム作成の宣言

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

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

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

テキスト入力ボックス

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

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

メールアドレス入力欄

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

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

パスワード入力欄

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

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

テキストエリア

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

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

セレクトボックス

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

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

HTMLでプルダウンの選択メニューを表示する方法/Select・Optionタグの使い方

お問い合わせやアンケートページなどで活用できる、プルダウンリストをHTMLで実装する方法のご紹介となります。

sunagitsune.com

2019.02.08

送信ボタン

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

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

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

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

HTMLの便利な使い方・タグ逆引きリファレンス

ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

sunagitsune.com

2019.01.27