WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

HTML5で追加されたユーザビリティを向上させるフォームのType属性値

HTML5のフォーム属性値

HTML5は従来のHTML4.01に比べて入力フォームフォームの機能が強化されています。以前ならば日付の入力をキーボードで手動で入力する形式であったため、javascriptで複雑なプログラムを走らせていましたが、HTML5はネイティブでサポートしています。

電話番号入力などもスマートフォンでタップすると自動で数字が打ち込める画面が表示されたりとデバイスごとの最適化も行われています。

WEBデザイナーはフォームの機能部分を実装することは少ないですが、HTML5だけで機能するものに関してはHTML・CSSコーディングを含めてデザイナーの担当領域になります。個人のブログをWordPressで立ち上げる際にも便利な機能なので、使用頻度の高いものは覚えておきましょう。

search

検索キーワードの入力フィールドを生成。WordPressの検索システムにもそのまま流用可能

tel

電話番号を入力するフィールドの生成。自動的にスマートフォンにも最適化

url

URLの入力フィールドを生成。ブラウザの履歴で候補表示可能

email

メールアドレスの入力フィールドを生成。ブラウザの履歴で候補表示可能

date

日付入力フィールドの生成。カレンダーが表示される

datetime-local

日時入力フィールドの生成。カレンダーが表示される

month

月の入力フィールドの生成。カレンダーが表示される

week

週の付入力フィールドの生成。カレンダーが表示される

time

時間の入力フィールドの生成。

number

数値の入力フィールドの生成。

range

レンジバーフィールドの生成。

color

カラーの入力フィールドを生成。パレットが表示される。

autofocus

ページを読み込んだ際にautofocusを入れたフォームがアクティブになっており、入力可能な状態になっています。入力に関して最も重要な部分や、フォームの一番上の項目で使用します。

autocomplete

入力フィールドに候補を指定しておき、ユーザーが入力する際に入力を補助する機能です。WEBサービスなどではPHPなどを使用してデータベースから候補を出力することが多いですが、その土台となるHTMLを組むのはWEBデザイナーの仕事になります。知っていると知っていないでチームの作業工数が大幅に変わります。

placeholder

入力フォームにデフォルトで入っている文字を指定します。記入例などに多用されます。フィールドをアクティブの状態にすると文字が消えてユーザーが入力できるようになります。どのように入力してよいのかわかりにくいフォームのユーザビリティを上げるには必須の機能です。

required

入力フィールドを必須項目にします。記入がないとフォームから送信できないため、氏名や電話番号・メールアドレスの入力フィールドに使用します。入力せずに送信ボタンを押すとエラーが表示されます

HTML5の入力フォームの機能は暗記しよう

WEBデザインの現場で多く使われるフォーム関連の新機能です。Type属性input要素も格段に増えています。これらをHTMLで実装できるとjavascritを使用せずに住むことから開発スピードが早くなり、また動作も軽くなります。現在の主流ブラウザのほぼ全てで対応していることから、BtoBのバックヤード画面以外はスタンダードになっていくと思われます。

これらは知っているか、知っていないかだけですのでWEBサービス系のフロントエンドデザインやコーディング案件では必須の知識です。派遣社員レベル以上のWEBデザイナーは確認しておきましょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST