More Related Content
Similar to HTML Forms (20)
More from 株式会社ランチェスター (20)
HTML Forms
- 2. アジェンダ
CONTENTS
1.HTML5の成り立ち
2.HTML Formsとは
3. input要素のtype属性拡張
4.属性による既存input要素の変更
5. その他の変更
Proprietary and Confidential to Lanchester Co.,LTD. Page 1
- 5. 3-1.input要素のtype属性拡張
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">
<input type="file">
<input type="hidden">
今まではこれだけで頑張ってたformだが・・・
Proprietary and Confidential to Lanchester Co.,LTD. Page 4
- 6. 3-2.input要素のtype属性拡張
<input type="text"> <input type="number">
<input type="password"> <input type="range">
<input type="checkbox"> <input type="url">
<input type="radio"> <input type="email">
<input type="submit"> <input type="date">
<input type="reset"> <input type="month">
<input type="button"> <input type="week">
<input type="image"> <input type="time">
<input type="file"> <input type="datetime">
<input type="hidden"> <input type="datetime-local">
<input type="search">
<input type="color">
<input type="tel">
なんとびっくり13種も追加に!
UserAgent(ブラウザ)での挙動は厳密に定義されていないも
のの提出されるデータ形式は定義されているのでサーバサイド
でのチェックルーチンが使いまわせるという利点がある。
Proprietary and Confidential to Lanchester Co.,LTD. Page 5
- 9. 3-5.<input type="url">
絶対URLの入力用。
コントロールタイプとしてはテキストフィールド。
必ずしもhttp/httpsのスキームとは限っておらず、標準状態では[RFC3986]によるバリデーショ
ンが行われる。
・・・はずだが、Opera10/Chromeの実装では「a:」で通ってしまう。
※ RFC的には最低でも「a://」だと思うんだけど自信はない
実際に入力してもらいたい内容をpattern属性で指定した方が良いかも。
「ならでは」な属性は特になく、実際に提出される値はtextと同等だが、こちらはURLを入力させ
るようなセマンティクスを持ったUIとなっている。
かもしれない。
Proprietary and Confidential to Lanchester Co.,LTD. Page 8
- 10. 3-6.<input type="email">
メールアドレスの入力用。
コントロールタイプとしてはテキストフィールド。
multiple属性を付加することで複数のメールアドレスを入力することもできる。
標準状態では dot-atom-text"@"dot-atom-text形式にてバリデーションが行われる。
※ dot-atom-textは[RFC5322]にて定義
つまり「a@a」でもvalidとなってしまう。
※ 多分。なのでpattern属性で指定した方が良いかも。
multiple属性が指定された場合は妥当なメールアドレスの","区切りリストが提出される。
「ならでは」な属性は特になく、実際に提出される値はtextと同等だが、こちらはメールアドレス
を入力させるようなセマンティクスを持ったUIとなっている。
かもしれない。
Proprietary and Confidential to Lanchester Co.,LTD. Page 9
- 16. 3-12.<input type="datetime-local">
タイムゾーンなしの日付・時間入力用。
コントロールタイプとしては日時コントロール。
UserAgentの実装にもよるがカレンダーやスピナーコントロールなどの入力補助があることが想
定される。
パラメータの指定次第でミリ秒(1/1000秒)までの入力をさせることができる。
標準状態では60秒単位での入力(=時:分)となる。
提出されるデータ形式は「YYYY-MM-DD"T"HH:MM:SS.mmm」(URLエンコーデッド)
ただし必要に応じて「:SS」「.mmm」部分は省略される。
※ 2010-09-20T08:00
このフォーマットは「ISO 8601」にて定義されている日付と時刻の表記に関する国際規格だが、
タイムゾーンを指定することはできない。
Proprietary and Confidential to Lanchester Co.,LTD. Page 15
- 19. 3-15.<input type="tel">
電話番号の入力用。
コントロールタイプとしてはテキストフィールド。
現時点では実装がなく、telやemailのような標準バリデータも持っていない。
これは国やUIで要求される内容が変わるためとなっている。
「電話番号用」というセマンティクスを持ったUIとなる。
かもしれない。
Proprietary and Confidential to Lanchester Co.,LTD. Page 18
- 21. 4-2.autocomplete属性
適用type:text,search,url,tel,email,password,datetime,date,month,week,time,datetime-
local,number,range,color
値:on / off / default
この属性でonが指定された要素では過去に入力した内容をUserAgentが記憶してくれることを
期待する。
また、offが指定された場合にはUserAgentに対して入力内容を記憶して欲しくない要素である
ことを指示する。
defaultはform要素の値を引き継ぎます。form要素のautocomplete属性は指定なしの場合onと
なる。
<input type="text" autocomplete="on" name="username">
<input type="password" autocomplete="off" name="password">
Proprietary and Confidential to Lanchester Co.,LTD. Page 20
- 22. 4-3.list属性
適用type:text,search,url,tel,email,datetime,date,month,week,time,datetime-
local,number,range,color
値:datalist要素のID
入力の候補となるリストを別途定義し、その内容を選択可能とする。
<input type="search" list="suggest">
<datalist id="suggest">
<option value="のっち" label="大本彩乃">
<option value="かしゆか" label="樫野有香">
<option value="あ~ちゃん" label="西脇綾香">
</datalist>
Proprietary and Confidential to Lanchester Co.,LTD. Page 21
- 23. 4-4.required属性
適用type:text,search,url,tel,email,password,datetime,date,month,week,time,datetime-
local,number,checkbox,radio,file
この属性が指定された要素が必須入力であることをUserAgentに指示する。
また、CSSの擬似クラスを用いることで簡易に状態を表現できる。
input[type=text]:required { background:pink; }
<input type="text" required>
<input type="text">
Proprietary and Confidential to Lanchester Co.,LTD. Page 22