SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【html5】フォーム要素サンプル(input編)

問題

html5のinput要素がすごいことになってますね。

答え

Javascriptなしにコンボボックスや日付入力(カレンダーが表示される)など、ブラウザを作る方は大変だろうけど、使う方にはありがたい機能が満載。

ブラウザによってサポート状況はまちまち。

実際に書いてみて、いろいろなブラウザで見てみるとおもしろい。特にOperaはよく対応している。

input type=”text”
input type=”text” list=”xxxxxx” + datalist id=”xxxxxx”
input type=”text” pattern=”[0-9]{8}”
8桁の数字を入力してください(正規表現チェック)
input type=”search”
 検索キーワードを入力してください
input type=”text” placeholder=”検索キーワードを入力してください”
←今までJavascriptで実装していた動き
input type=”tel”
電話番号を入力してください
input type=”url”
URLを入力してください
input type=”email”
メールアドレスを入力してください
input type=”password”
パスワード入力
input type=”datetime”
日時入力
input type=”date”
日付入力
input type=”date” max=”2070-10-31″ min=”1870-01-05″
日付入力(上限、下限あり)
input type=”month”
月入力
input type=”week”
週入力
input type=”time”
時間入力
input type=”datetime-local”
日時入力
input type=”number”
数値を入れてください
input type=”range”
スライダーで値を指定できる
input type=”color”
カラーピッカー
input type=”checkbox”
チェックボックス
input type=”radio”
ラジオボタン
input type=”file”
ファイルをひとつ指定してください
input type=”file” multiple
ファイルを指定してください(複数可)
input type=”file” accept=”image/*”
画像ファイルを指定してください
input type=”submit”
submitボタンにも新しい機能が追加されている。また今度紹介する。
input type=”button”

付録:DOMインターフェース

interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute boolean autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
  readonly attribute FileList files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute DOMString height;
           attribute boolean indeterminate;
  readonly attribute HTMLElement list;
           attribute DOMString max;
           attribute unsigned long maxLength;
           attribute DOMString min;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
           attribute Date valueAsDate;
           attribute float valueAsNumber;
  readonly attribute HTMLOptionElement selectedOption;
           attribute DOMString width;

  void stepUp(in long n);
  void stepDown(in long n);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
  void setSelectionRange(in unsigned long start, in unsigned long end);
};

関連するメモ

コメント(1)

【html5】placeholder属性(とりあえず入れてみよう) at softelメモ 2012年6月15日 08:26

[…] 【html5】フォーム要素サンプル(input編) Tweet . […]