Ep.014 – Form, Input, Placeholder – Learn HTML and HTML5 – Free Course

In the previous post, we have learned about the difference between block and inline elements. In this post, we will learn about the form and input tags as well as the placeholder attribute of the input tag.

Form Tag:

The form tag <form> is used to add a form on an HTML page. The HTML form consists of input fields. We will discuss the input fields in the next section. The following code example shows how to use the <form> tag:

<form>

</form>

Input Tag:

The input tag <input> is used to add input fields in an HTML form. The type attribute of the input tag defines the type of the input field e.g. text, number, email, password, etc. The following code example shows how to add input fields to an HTML form:

Code:

<p>The following form consists of two input fields.</p>
<form>
    <input type="text" />
    <input type="number" />
</form>

Output:

The following form consists of two input fields.

Placeholder Attribute:

The placeholder attribute can be added in any input field tag to display a placeholder text inside the input field. The placeholder text tells the user about the kind of information the user needs to insert in the input field.

Code:

<p>The following form consists of two input fields with placeholder texts.</p>
<form>
    <input type="text" placeholder="Add text here ..." />
    <input type="number" placeholder="Add number here ..." />
</form>

Output:

The following form consists of two input fields with placeholder texts.

Label Tag:

The label tag is used to define a label for any input field. The following example shows how to add a label for any input field:

Code:

<p>The following form consists of three input fields with labels and placeholder texts.</p>
<form>
    <label>Username: </label>
    <input type="text" placeholder="Add username here ..." /><br>
    <label>Password:</label>
    <input type="password" placeholder="Add password here ..." /><br>
    <input type="submit" value="Click to Submit" />
</form>

Output:

The following form consists of three input fields with labels and placeholder texts.



Note: The value attribute of the input[type=submit] defines the text inside the submit button.

Video Tutorial (Urdu Language):

HTML Forms (1) – Learn HTML and HTML5

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section below. Thanks

Leave a Comment