HTML Form Attribute

HTML provides very strong support to build web forms using built-in elements. Web forms are often the most used functionality at the client-side or user end. The HTML provides

element, which is mainly used to design the forms. It’s the main or parent element from which the overall form will be designed. Then various attributes are available to design the form as a whole document. In this HTML Form Attribute article, we will design a simple form and see the

element along with various attributes that we can use with it.

HTML Form Attributes

HTML form element can be used in various ways, It can be used along with the many existing available HTML elements like , ,

, , etc. Also, there are various attributes available to use along with the element. Let’s see them by designing the simple web form step by step.

1. name attribute

Code:

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

Output:

So we have a simple form with simple input as the First Name. The name attribute is used along with the form element to declare input as the First Name. This attribute will be useful when we will send the form data over the network using HTTP. The attribute name and its value will be added to the HTTP Request when we send the request. This information will be used for processing data at the server-side.

2. action attribute

Let’s add the submit button in our example so that the form can be submitted.

Code:

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

Output:

If we try to submit the form by clicking on the submit button, it will not work. If we look at the code, there is no action to perform or do something upon submitting the form. This is where the attribute comes into the picture. Let’s add the element in our example along with some additional input fields.

Code:

<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>

Output:

So we have added two more input elements, last name and email, so that we can see how the form data is sent within the URL when we submit the form. Also, in the form element, we have added the attribute with the value as “action.html”. So, whenever we submit the form, the URL will be redirected to the web page or resource under the action attribute, and along with that, the form data will be submitted.

If you try to submit the form as it is, you will get an error like a file not found, but that’s OK as the processing of data is not in our scope to learn right now. But If you see the redirected URL, you can see the submitted fields along with the values because the get method is being used by default for form submission.

3. method attribute

So HTTP requests can be made using various methods like get, post, put, delete, etc. method attribute is used to specify the method used for the submission of a form. In the previous example, we have sent the request with the default get method. We can specify a particular method using a method attribute.

Example

Just modify the form element as above in our example. Now request will be made as a post request, and we will not be able to see the fields and their values.

4. value attribute

The value attribute is used on the fields to set their initial value in the form. When the form is loaded, the assigned values will be displayed as default on the user page which the user can change.

Let us add value attribute in our example:

Code:

<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>

Output:

5. autocomplete attribute

The HTML autocomplete attribute is used along with the form element to enable or disable the autocomplete feature. This feature is available as ON by default; that’s why we can see the autocomplete suggestion in our previous example. We can add this attribute in the form element as below,

Code:

<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>

 Output:

The suggestions will not be shown when autocomplete is off, and by default, it will be on.

結論

これで、Web フォームの構築時に使用できる、利用可能で重要な HTML フォーム属性のほとんどがわかりました。アクション、メソッド、オートコンプリートなどのフォーム属性を見てきました。これらの HTML フォーム属性を使用すると、直感的な Web フォームを開発および設計するためのさまざまな種類の機能を簡単に実装できます。これらにより柔軟性が得られるため、必要な方法でフォームを設計できます。 Web フォームはさまざまな方法で設計でき、HTML フォーム要素がそのバックボーンとなります。

The above is the detailed content of HTML Form Attribute. For more information, please follow other related articles on the PHP Chinese website!