フォーム関連機能（2）

フォーム関連機能まとめ

required属性

• 入力必須を指定します

placeholder属性

• 入力欄に初期値として表示されます

autofocus属性

• 自動フォーカスを指定する
• IE6・7対応する場合は「autofocus="autofocus"」と記述します

autocomplete属性

• 入力候補を提示して入力内容を自動補完する
• ユーザーに対して入力候補を提示して、内容を自動補完することができます

datalist

• 入力候補となるデータリストを定義する

pattern属性

• 正規表現による入力制限をする

以下のサンプルは、半角英数で入力されているかどうかのチェックです

<input type="text" name="userid" id="userid" pattern="^[0-9A-Za-z]+$"> ※半角英数

multiple属性

• ユーザーが複数の値を一度に入力、あるいは、選択して送信する
• 値はカンマ区切りとなります

<input type="text" name="hobby" id="hobby" list="hobbys" multiple>
<datalist id="hobbys">
<option value="映画">
<option value="音楽">
<option value="絵画">
<option value="読書">
</datalist>

min属性・max属性

• 数値型や日付型の入力欄で、入力できる値の最小値と最大値を指定する

<input type="number" name="ninzu" id="ninzu" min="1" max="4">

step属性

• ステップ値
• step属性の指定で、数値型や日付型の入力欄で刻むステップ値を指定する

<input type="number" name="lot" id="lot" step="0.5">

サンプル１

<form action="#" method="post" id="inquiry">
オートフォーカス（autofocus属性）:<input type="text" name="subject" id="subject" autofocus><br>
プレースホルダー（placeholder属性）:<input type="search" name="q" id="q" placeholder="検索するキーワードを入力してください"><br>
オートコンプリート（autocomplete属性）:
<input type="text" name="yourarea" id="yourarea" autocomplete="on" list="tokyo">
<datalist id="tokyo">
<option value="渋谷">
<option value="新宿">
<option value="池袋">
</datalist><br>
入力必須（required属性）:<input type="text" name="yourname" id="yourname" required><br>
正規表現による入力制限（pattern属性）:<input type="text" name="userid" id="userid" pattern="^[0-9A-Za-z]+$"> ※半角英数<br>
複数の値（multiple属性）:
<input type="text" name="hobby" id="hobby" list="hobbys" multiple>
<datalist id="hobbys">
<option value="映画">
<option value="音楽">
<option value="絵画">
<option value="読書">
</datalist><br>
最小値と最大値（min属性・max属性）:<input type="number" name="ninzu" id="ninzu" min="1" max="4"> <br>
ステップ値（step属性）:<input type="number" name="lot" id="lot" step="0.5"><br>
<input type="submit" value="送信">
</form>