Hatena::ブログ(Diary)

Webデザインの勉強 3月22日開講クラス フェリカテクニカルアカデミー

↓08月05日開講クラスサポートブログ Webデザインの勉強 風姿花伝 | フェリカテクニカルアカデミーWebサイト制作科08月05日開講クラスブログ


◎求職者支援訓練 Webデザインの勉強 | フェリカTA受講生作品紹介◎

◎Webデザインの勉強 Webサイト制作科用授業解説と演習問題◎


2016-06-26

フォーム関連機能(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">

サンプル1

<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>

f:id:web-html5:20131022232428j:image