Creating Forms in HTML

Until now, we have only learned how to put content and images on the webpage and structure them as we need. But we have not yet been able to add some level of interaction to our page such as making user submit data through the form. In this guide, we will learn how to do that.

Creating a form in HTML is fairly a simple process. To create a form, we use <form></form> tags.

Inside the <form>  we use another HTML tag <input>  that accepts some input from the user. Here is what our basic form looks like.

<form>
<input type = ‘text’ placeholder = ‘Full Name’ name = ‘name’>
<input type = ‘submit’>
</form>

In the input tag, we have used extra attributes. Type attribute specifies what kind of input are we expecting from the user. Here we use type as text specifying that we are expecting a text from the user which in this case is user’s name.

Next, we have used placeholder to specify the placeholder text. Placeholder text is the text which is displayed in the input field to help user as a guide.

Finally, name is used to give a name to this specific input field as we might need to extract the data user submitted through this field.  Name is used as marker or as an ID to the particular field so that we recognise and distinguish between different input fields later on.

In the second <input> we have used type as submit. This will show up as button on the webpage.

We can have many different types for the input such as password or number.

Again, HTML gives us various options for the input types. We might give user options to select from multiple options or radio buttons or checkboxes. The key is to look up how to use one until you are well accustomed to these.

Leave a Reply

Your email address will not be published.

4 × 4 =