HTMLフォーム属性

HTML は、組み込み要素を使用して Web フォームを構築するための非常に強力なサポートを提供します。 Web フォームは、多くの場合、クライアント側またはユーザー側で最もよく使用される機能です。 HTML は

を提供します。主にフォームのデザインに使用される要素です。これは、フォーム全体のデザインの基となるメイン要素または親要素です。次に、ドキュメント全体としてフォームを設計するためにさまざまな属性を使用できます。この HTML フォーム属性の記事では、単純なフォームを設計し、

を確認します。要素と、それとともに使用できるさまざまな属性。

HTML フォームの属性

HTML フォーム要素はさまざまな方法で使用でき、、、

、 などの既存の利用可能な HTML 要素と一緒に使用できます。 と一緒に使用できるさまざまな属性があります。要素。簡単な Web フォームを段階的に設計して、それらを見てみましょう。

1.名前属性

コード:

<div>
<form>
First Name: <input type="text" name="name">
</form>
</div>

出力:

それで、名として単純な入力を含む単純なフォームができました。 name 属性は、フォーム とともに使用されます。要素を使用して入力を名として宣言します。この属性は、HTTP を使用してネットワーク経由でフォーム データを送信する場合に役立ちます。属性名とその値は、リクエストの送信時に HTTP リクエストに追加されます。この情報はサーバー側でのデータ処理に使用されます。

2.アクション属性

フォームを送信できるように、この例に送信ボタンを追加しましょう。

コード:

<div>
<form>
First Name: <input type="text" name="name">
<input type="submit">
</form>
</div>

出力:

送信ボタンをクリックしてフォームを送信しようとしても、機能しません。コードを見ると、フォームの送信時に実行するアクションや何かを行うアクションはありません。ここで が始まります。属性が登場します。 を追加しましょう。この例の要素といくつかの追加の入力フィールド。

コード:

<div>
<form action="action.html">
<label> First Name: </label> <br>
<input type="text" name="fname"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email"> <br> <br>
<input type="submit">
</form>
</div>

出力:

そこで、姓とメールアドレスという 2 つの入力要素をさらに追加して、フォームを送信するときに URL 内でフォーム データがどのように送信されるかを確認できるようにしました。また、form 要素に を追加しました。属性の値を「action.html」にします。したがって、フォームを送信するたびに、URL は action 属性の下の Web ページまたはリソースにリダイレクトされ、それとともにフォーム データも送信されます。

そのままフォームを送信しようとすると、ファイルが見つからないなどのエラーが表示されますが、データの処理は現時点では学習範囲外なので問題ありません。ただし、リダイレクトされた URL が表示される場合は、フォームの送信にデフォルトで get メソッドが使用されているため、送信されたフィールドと値を確認できます。

3.メソッド属性

そのため、HTTP リクエストは、get、post、put、delete などのさまざまなメソッドを使用して作成できます。method 属性は、フォームの送信に使用されるメソッドを指定するために使用されます。前の例では、デフォルトの get メソッドを使用してリクエストを送信しました。メソッド属性を使用して特定のメソッドを指定できます。

例

上記の例のように form 要素を変更するだけです。今後、リクエストは投稿リクエストとして行われるため、フィールドとその値を確認することはできません。

4.値属性

value 属性は、フォーム内の初期値を設定するためにフィールドで使用されます。フォームがロードされると、割り当てられた値がユーザー ページにデフォルトとして表示され、ユーザーは変更できます。

この例に value 属性を追加してみましょう:

コード:

<div>
<form action="action.html" method="post">
<label> First Name: </label> <br>
<input type="text" name="fname" value="Enter first name"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname" value="Enter last name"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email" value="Enter valid email"> <br> <br>
<input type="submit">
</form>
</div>

出力:

5.オートコンプリート属性

HTML のオートコンプリート属性は、オートコンプリート機能を有効または無効にするために form 要素とともに使用されます。この機能はデフォルトでオンとして使用できます。前の例でオートコンプリートの提案が見られるのはこのためです。以下のように、この属性を form 要素に追加できます。

コード:

<div>
<form action="action.html" method="post" autocomplete="off">
<label> First Name: </label> <br>
<input type="text" name="fname"> <br> <br>
<label> Last Name: </label> <br>
<input type="text" name="lname"> <br> <br>
<label> Email: </label> <br>
<input type="text" name="email"> <br> <br>
<input type="submit">
</form>
</div>

出力:

オートコンプリートがオフの場合、候補は表示されません。デフォルトではオンになります。

Kesimpulan

Jadi kami telah melihat kebanyakan atribut borang HTML yang tersedia dan penting yang boleh kami gunakan semasa membina borang web. Kami telah melihat atribut bentuk seperti tindakan, kaedah, autolengkap, dll. Atribut bentuk HTML ini memudahkan untuk melaksanakan pelbagai jenis ciri untuk membangun dan mereka bentuk borang web intuitif. Mereka membenarkan fleksibiliti supaya borang boleh direka bentuk dengan cara yang diperlukan. Borang web boleh direka bentuk dalam pelbagai cara yang mungkin dan elemen bentuk HTML adalah tulang belakangnya.

以上がHTMLフォーム属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。