HTML と CSS を使用してアクセシブルなフォームをデザインする方法
目次
- はじめに
- フォームのコンポーネント
- HTML を使用したアクセス可能なフォーム
- 結論
導入
フォームはウェブサイトの構築に不可欠な部分です。これらは、ユーザーが詳細を送信するときにユーザーからデータを収集するために使用されます。フォームは、ユーザーがサインアップ フォームを送信したり、フォームにログインしたり、ニュースレターを購読したり、フィードバックを受け取るためにメッセージを送信したりする際に重要です。アクセシブルなフォームを作成することは、誰にとっても、特にスクリーン リーダーが問題なくフォームに入力できるようにするために重要です。
フォームのコンポーネント
フォームは、
などのさまざまなコンポーネントで構成されます。- form: これは、入力タグ、送信ボタン、テキストエリア、チェックボックス、ラジオ ボタンなどの他のすべてのフォーム要素を受け入れるコンテナです。
<form></form>
ログイン後にコピー
- input: これは、ユーザーの詳細を受け入れる HTML 要素です。 input タグは、入力の目的に応じて提供されます。テキスト、番号、パスワード、メールアドレスなど
<form>
<input type="text" />
<input type="email" />
<input type="password" />
<input type="radio" />
<input type="checkbox" />
<input type="file" />
<input type="range" />
<input type="color" />
<input type="date"/>
</form>
ログイン後にコピー
- label: 入力に記入する詳細の概要を示すこのタグ。 input タグに関連付けられます。
<form> <label for="email">Email</label> <input type="email">
ログイン後にコピー
- textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users
<form> <label for="message">Message:</label> <textarea>
ログイン後にコピー
- select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used.
<form> <select>
ログイン後にコピー
- checkbox: this element allow users to select one or more options.
<form> <label for="subscribe"></label> <input type="checkbox">
ログイン後にコピー
- button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server.
<form> <button type="submit">Submit</button> </form>
ログイン後にコピー
HTML を使用したアクセシブルなフォーム
- セマティックタグを含める