※作成から2年前(802日経過)の記事です。内容が古い可能性があります。
この「経過時間表示」ってどうやってつくる?情報が古い記事にアナウンスするを見る

HTML,JS,PHPを利用しないと完成しないfromダグ。ユーザーにもエンジニアにもフロントエンダーにも優しいフォームの作り方ってなんでしょうか?まずは最低限のフォームを基礎知識を考えます。

フォームとインプットとボタン

一般的なフォームといえば、お問い合わせでしょうか。例えば以下のように入力欄やボタンが存在していますので細かく考えます。

RAW HTML

オートコンプリート、オートフィル

最新のブラウザではアカウントに住所などを登録出来るようになりました。
その情報を利用するため特定のinputautocomplete="XXX"と属性を設定します。→危険?便利?オートコンプリートで注意すること

<input type="text" autocomplete='name'>
ソースコード装飾ならGoogle code prettify


https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

フォーカス

最初のinputfocusを指定するとページに遷移した時、フォーカスが指定された入力欄へカーソルが移動します。

必須入力・バリデーション・文字数制限

HTML5からinputタグで入力・未入力の必須設定が出来るようになりました。


emailやtelなどは簡易でバリデーションが取れるようになりました。

郵便番号のように完全に桁数が決まっているなら、maxlnguth,minlangthで指定すれば入力ミスもへるかな?
<input type="text" maxlength="7" minlength="7" >
ソースコード装飾ならGoogle code prettify

サブミットボタン

buttonタグがformタグ内に入ってる場合は、特に属性を付けなくてもそのフォームをsubmitします。

<form method="post"><button>確認する</button></form>
ソースコード装飾ならGoogle code prettify

form外にボタンを出したい場合はform属性を利用すると指定のフォームをsubmitします。
<form name="form1"></form>
<button form="from1">確認する</button>
ソースコード装飾ならGoogle code prettify

タグと属性

FORMタグでよく使いそうな属性


autocomplete
method
id

INPUTよく使いそうな属性


autocomplete(抜粋)
given-name,family-name: 姓 (last name),nickname,email,username,new-password,organization-title,organization,address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1,postal-code,bday-day,bday-month,bday-year,sex,tel,url
autofocus
form
inputmode
kana,katakana,numeric,verbatim,list,
required
maxlength
minlength

ボタンよく使いそうな属性


from
formaction
formmethod

電話番号、郵便番号のハイフンありなし

名前もそうですが、入力エリアを分解は辞めたいところです。ハイフンはJSで排除してしまいましょう。
ハイフンを入力させないJS

AJAXバリデーション

HTMLでバリデートできるのは、入力されているか否かなので、内容についてはJSでバリデートします。
カナだけ、数字だけ、全角から半角に変換などJS
郵便番号と入力値を比べるJS

住所の分割ってどするの?

住所の分割もやめたいところですが、ECサイトなどは関連するシステムの問題で、分割していた方がいい場合があります。例えば郵便番号と入力値を比べる場合など番地以下を分けておかないと比較できない場合があります。また同じような建物がある地域だと建物名を入力しないと配送されない場合があるります。

危険?便利?オートコンプリートで注意すること

そのうち対応されると思いますが、2017年7月現在、オートコンプリートはtype=heiddenでも動きます。メールアドレスだけを入れたつもりでも、住所や名前を一緒に取得される場合があります。