パーツで使用するパーツについて
前回から続いて今回はフォームの作成時に使用するタグを紹介していきます。
これから紹介するのはフォーム内で各パーツを設置する際に使用します。大体の物が<input>タグ
を使用し、type属性で用途に合わせて表示するパーツを変更しましょう。
<input type=”text”>
名前：<input type="text"><input>タグにtype属性でtextの値を指定することで、コンタクトフォーム等で見られる名前や検索ボックスの語句を入力できる部分になります。
名前：<input type="text" placeholder="テスト 太郎">placeholder属性を使用することで入力欄にあらかじめテキストを用意することもできます。
あらかじめ入力されている文字はユーザーが入力欄に文字を入力しようとすると消えてくれます。
色々な1行のテキスト入力欄
1行のテキストではメールアドレス・url等様々あります、これらを指定しておけば属性値をサポートしているブラウザーで正しい書式かをチェックしてもらえます。
以下が主に使用される入力欄の属性値になります。
text
一行のテキスト
search
検索時に使用するテキスト
メールアドレスの入力
tel
電話番号の入力
url
サイトのURLの入力
<input type=”radio”>
性別:
<input type="radio" name="test" value="好き">好き
<input type="radio" name="test" value="普通" checked>普通
<input type="radio" name="test" value="嫌い">嫌い複数ある選択肢の中から1つを選択してもらいたい時などにラジオボタンを使用しましょう。
ユーザーがどれかを選択すると他の選択肢は自動的に選択できなくなります。
主な属性値は以下となります。
name
ラジオボタンの名前を記載します
value
送信される選択肢の値を入力します
checked
最初から選択状態にする際に使用します
複数の選択肢があるラジオボタンを作る際は、name属性にそれぞれ同じ値をつけることで一つのグループとしてまとめることができます。ユーザはその中から一つだけを選択することができます。
checked属性を指定したラジオボタン最初から選択した状態になるため、よく選択されていたり推奨される項目に入れて置くと使いやすいと思います。
コメント