HTML

HTML Lesson 13: Input tags in HTML forms.

In this knowledge bit, we are going to learn about input tags in HTML form creation, and going to build our own form and we are also going to discuss the purpose of different input attributes.

Input tags in HTML:

So go and open the sublime text editor and create new HTML file and add HTML skeleton in the editor.

If you want to get input from the user you can create input text within your <body> element in HTML file by using this below code.

<input type="text">

Input type password define a password field and it is used when we are masking character

<input type="password">

We use placeholder attribute to specify a short hint that describes an expected value of an input field. Placeholder attributes only work with text, search, URL, tel, email, and password input type and it’s just going to be the text that is temporarily filling the input before the user alters it.

We can use placeholder by typing placeholder within input tag like below code.

<input type="text" placeholder="Your Name">

HTML <button> Tag

We use <button> tag in HTML to creating a button within form. We can put content, like text images inside a <button>. Create a button by using the following code.

<button type="button">I am Button!</button>

There is also another way to create a similar button, we can also use the <input> tag to create buttons in HTML.

<input type=”Submit”>

Code

Here is an example of Html code for creating a Form. It consists of multiple attributes like textbox input type password, text, and email address.

<!DOCTYPE html>

<html>

<head>

<title>HTML INPUT DEMO</title>

</head>

<body>

<h2>Sign In Here</h2>

<input type="text" placeholder="Your Email Address">

<input type="password" placeholder="Your password">

<button>Submit</button>

<h2>Sign Up here</h2>

<p><input type="text" placeholder="First Name"><input type="text" placeholder="Last Name"></p>

<p><input type="Email" placeholder="Email Address"><input type="Phone" placeholder="Phone Number"></p>

<button>Submit</button>

</body>

</html> 

 

Output:

Here is the output of above code. You can see two forms here. A login form which consists of one email address box, a password box, and a button. And, a sign-up form which consists of two text box, one email address box, phone number box and a submit button.

Input tags in html forms

Conclusion:

In this knowledge bit, we have learned about input tags in HTML form creation, and build a form. We have discussed the purpose of different input attributes. In the next knowledge bit, we are going to introduce form tag and learn about action and create the tag.

You can have a look at our whole HTML series as well.

1 Comment

Most Popular

To Top