フォームの作り方とinput属性の基礎

お問い合わせや資料請求や会員登録などユーザーから情報を送ってもらう場面ではフォームが欠かせません。入力しにくいフォームは途中で離脱されやすくなってしまうためシンプルで分かりやすい設計を心がけることが大切です。

form要素とinput要素

フォームはform要素で囲みその中にinputやtextareaやselectなどの入力パーツを配置します。inputにはtextやemailやpasswordなどのタイプがあり用途に応じて切り替えます。typeを適切に指定しておくとスマートフォンでのキーボードレイアウトが変わるなど入力のしやすさにも影響します。

See the Pen フォームの作り方とinput属性の基礎 by Syo Yanai (@h1-tech-japan) on CodePen.

labelとエラーメッセージ

label要素で項目名と入力欄を関連付けるとクリックしやすくなり支援技術にも情報が伝わりやすくなります。必須項目の表示や入力エラー時のメッセージなども合わせて設計することでユーザーにとって親切なフォームになります。まずはシンプルな名前とメールと本文の三項目から作り慣れていきましょう。