フォーム関連機能（2）
フォーム関連機能まとめ
required属性
- 入力必須を指定します
placeholder属性
- 入力欄に初期値として表示されます
autofocus属性
- 自動フォーカスを指定する
- IE6・7対応する場合は「autofocus="autofocus"」と記述します
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>
サンプル２
<form action="#" method="post"> <label>メール（type="email"）:<input type="email" name="email" id="email"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>URL（type="url"）:<input type="url" name="url" id="url"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>検索（type="search"）:<input type="search" name="search" id="search"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>電話（type="telephone"）:<input type="tel" name="tel" id="tel"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>数値（type="number"）:<input type="number" name="number" id="number"></label> <input type="submit" value="送信"></form> <form action="#" method="post"> <label>日付（type="date"）:<input type="date" name="date" id="date"></label> <input type="submit" value="送信"></form> <form action="#" method="post"> <label>日時（type="datetime"）:<input type="datetime" name="datetime" id="datetime"></label> <input type="submit" value="送信"></form> <form action="#" method="post"> <label>ローカル日時（type="datetime-local"）:<input type="datetime-local" name="datetime-local" id="datetime-local"></label> <input type="submit" value="送信"></form> <form action="#" method="post"> <label>月（type="month"）:<input type="month" name="month" id="month"></label> <input type="submit" value="送信"></form> <form action="#" method="post"> <label>週（type="week"）:<input type="week" name="week" id="week"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>時間（type="time"）:<input type="time" name="time" id="time"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>レンジ（type="range"）:<input type="range" name="range" id="range"></label> <input type="submit" value="送信"> </form> <form action="#" method="post"> <label>色（type="color"）:<input type="color" name="color" id="color"></label> <input type="submit" value="送信"> </form>
