お問い合わせフォームなどで使用するテキストボックス
フォームのレイアウト構成
formタグは、データを送信する時に使用することが一般的です。
お問い合わせフォームからの問い合わせや、会員登録・ログインなど
情報をサイト内外へ送信することが可能です。
フォームの送り方を指定
formタグは以下のように2つの属性を指定する必要があります。
<form action=” “ method=” “> </from>
action属性は、「どこに」送るかを指定し、
method属性は「どうやって」送るかを指定します。
入力フォームを作成
フォームタグの中に、情報を入力するための場所と入力形式を作成します。
よく使う代表的な例とその説明は以下の通りです。
一番使用頻度が高く、type属性を指定してさまざまな入力形式にすることができます。
<input type=”text”> 1行のテキスト入力
<input type=”password”>文字が伏字になるテキスト入力
<input type=”radio”>選択式のラジオボタン
<input type=”submit”>「送信」ボタン
<textarea> </textarea> 複数行のテキストを入力
optionを追加して選択式のメニューを入力
<select>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
nameを指定
各タグにはnameの指定が必要です。サーバー側でデータを判別するためです。
inputやselectが複数ある際はそれぞれに名前をつけましょう。
<input type=”text” name=”first”>
labelを作成（必須ではありません）
labelタグを作成し、inputタグ等と紐づけることで、
labelクリックでも対象へカーソルを移動させるできます。
<label for=”name“>名前</label>
<input type=”text” name=”text” id=”name“>
このようにlabelのforタグと、inputのidを同じ名前にすることで、
「名前」ラベルをクリックしても1行のテキスト入力欄にカーソルを移動できます。
クリック範囲が狭い場合などはユーザーの利便性を向上させることも可能です。
まとめ
お問い合わせ等で使用するフォームについてまとめました。
どのサイトでも1度は使用する機会がある頻出のコードになると思いますので、
色々なバリエーションを覚えて見やすく不便を感じさせないサイト設計に
つなげていきましょう。
コメント