目次
- はじめに
- フォームのコンポーネント
- HTML を使用したアクセス可能なフォーム
- 結論
導入
フォームはウェブサイトの構築に不可欠な部分です。これらは、ユーザーが詳細を送信するときにユーザーからデータを収集するために使用されます。フォームは、ユーザーがサインアップ フォームを送信したり、フォームにログインしたり、ニュースレターを購読したり、フィードバックを受け取るためにメッセージを送信したりする際に重要です。アクセシブルなフォームを作成することは、誰にとっても、特にスクリーン リーダーが問題なくフォームに入力できるようにするために重要です。
フォームのコンポーネント
フォームは、
などのさまざまなコンポーネントで構成されます。
-
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 を使用したアクセシブルなフォーム
