How to Create a Form in HTML
- How to Create a Form in HTML
- HTML <form> Tag
- HTML <label> Tag
- HTML <input> Tag
- The placeholder Attribute
- The name Attribute
- HTML <input type =”password”>
- HTML <input type =”radio”>
- HTML <input type =”checkbox”>
- HTML <input type =”date”>
- HTML <input type =”file”>
- HTML <input type =”url”>
- HTML <input type =”image”>
- HTML <input type =”color”>
- HTML <input type =”range”>
- HTML <input type =”tel”>
- HTML <input type =”number”>
- The <textarea> tag
- HTML Submit Button
- HTML Reset Button
We mostly use HTML Forms to collect any type of data from the user. Like the text strings, passwords, number, images etc.
To create a form in HTML, we have to use a <form> tag. Along with this <form> tag we have to use various other tags like the <input> tag, <label> tag, <button> tag etc.
Here we will write a code and create a form like this:
HTML <form> Tag
To create a form in HTML, first we have to use a <form> tag. Like this:
<form>
<!--form data goes here--!>
</form>Now, between these form tags we can write the form data. As show in an above code.
Inside the form tag we have also use the action and method attributes. But these two attributes are required when we are going to connect this form with our backend server. Since, here we are only creating a basic HTML form , so we don’t need to add these attributes.
HTML <label> Tag
The <label> tag gives a user some kind of idea about what type of data they have to fill in a particular input field. It is a good practice to use for attribute inside a <label> tag, but if you don’t use it, your code will still work.
Here is how you can use the <label> tag, inside a form element.
<form>
<label>Your Name : </label>
</form>HTML <input> Tag
HTML <input> tag is used to create a text field where the user can enter their data. The<input> tag is a self closing tag and can be used with many attributes. Learn more about HTML <input> Tag.
Here is how you can use the <input> tag, in our HTML code.
<form> <label>Name : </label> <input type="text"> </form>
The placeholder Attribute
Inside an <input> tag, we can also use a placeholder attribute which makes our form somewhat stylish. Here is an example:
Example
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> </form>
The name Attribute
The name attribute in an HTML input tag is responsible for identifying the name of an input field. When a user fills the form and submits it, the name/value pairs of the input fields are included in the form data that is sent to the server.
The name attribute is very important, when we are want to connect this form with the backend server. Because it provides a way for the server to identify which input field the data corresponds to. Since here we are creating only a basic html form, so we don’t need to add this attribute.
Here is how you can add the name attribute in a HTML input tag.
<form>
<label>Firstname : </label>
<input type= "text" name="fname">
</form>HTML <input type =”password”>
HTML <input type= “password”> is used to create a password input field on a web page. When the user types anything into this field, the text is masked with bullets until the user clicks on a small eye shaped button.
Here is an Example:
Example
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> </form>
Copy the code and run it on our free online code editor to see how it really works.
HTML <input type =”radio”>
HTML <input type= “radio”> allows users to select any one option from the list of many options. We usually use this type of input when asking for the user’s gender, as individuals typically identify as either Male or Female, but not both.
Here is how we can use the <input type= “radio”> in our HTML code.
Example
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other </form>
Output
HTML <input type =”checkbox”>
HTML <input type= “checkbox”> element allows users to select one or more than one options from the list of options. We typically use this type of input when asking for the user’s skills, as many people may have more than one skill.
Here is how we can use checkbox attribute in our HTML code.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java </form>
Output
HTML <input type =”date”>
HTML <input type =”date”> allows users to input a date with the help of control.
Here is how you can use <input type =”date”> in HTML.
Example
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> </form>
Output
In an above line, whenever you click on the input field, a calendar control will appear, which will allow you to select a date.
HTML <input type =”file”>
HTML <input type =”file”> allows users to upload any type of file on a server.
Here is how you can use <input type =”date”> in HTML.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> </form>
Output
Whenever the user clicks on the Choose File button, a pop-up window will open which allow the user to select the files from their. Once the user selects his file, the file doesn’t actually uploaded to the server until the user submits the form.
When the user submits the form, the server-side script can access the uploaded file using the name attribute of the <input type=”file”> element. We will learn in-depth about it in our PHP Course.
HTML <input type =”url”>
The HTML <input type=”url”> specifies an input field for entering a URL. The web browser will automatically check whether the input value is a valid URL or not, before submitting a form.
In an below example, try to add any random text and click on submit button, if it is not an URL it will show you an error.
Example
Here is how you can use <input type =”url”> in HTML.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> </form>
HTML <input type =”image”>
HTML <input type=”image”> is used to create a clickable image button on a web page. In this case the user can submit the form by clicking on an image button, instead of submit button.
Here is the syntax for creating an image submit button.
<input type="image" src="image.jpg" alt="Submit">
In an above code, the “src” attribute is used to specify the URL of an image that will be displayed as the submit button. The “alt” attribute specifies the alternative text for an image.
Here is how you can use <input type =”image”> in HTML Form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> </form>
HTML <input type =”color”>
HTML <input type=”color”> is used to create a color picker input field on a web page.
Example
Syntax for creating color picker on a web page.
<input type="color" name="background_color" value="#000000">
Syntax Explanation
In an above code, the “name” attribute specifies a name for the input field, which we later use to access the entered color value on the server. The “value” attribute specifies the default color value of the picker.
Here is how you can add this <input type =”color”> in your HTML page.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> </form>
HTML <input type =”range”>
HTML <input type=”range”> is used to create a slider control in a web form. It allows users to select a numeric value within a specified range by simply moving a slider thumb. Here is how this slider control looks like:
Now let’s add this element in our HTML form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> </form>
HTML <input type =”tel”>
HTML <input type="tel"> is used to create a telephone number input field in an HTML form. It allows users to enter a phone number using a standard telephone keypad or other input methods.
Here is a syntax of <input type="tel">
<input type="tel" placeholder="(123) 456-7890">
Now let’s add this element in our HTML form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> <br> <br> <label>Enter Your Telephone Number : </label> <input type="tel" placeholder="(123) 456-7890"> </form>
HTML <input type =”number”>
HTML <input type="number"> is used to create a numeric input field in a web form. It allows users to enter a number using a standard numeric keypad, and a user can also decrease and increase the number using the small button that are present inside an input field.
Here is how <input type="number"> displays on a web form.
Now let’s add this element in our HTML form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> <br> <br> <label>Enter Your Telephone Number : </label> <input type="tel" placeholder="(123) 456-7890"> <br> <br> <label>Enter your marks : </label> <input type="number" value="1"> </form>
The <textarea> tag
In HTML, the <textarea> tag is used to create a multi-line text input control within a form. It allows users to enter large amounts of text, such as message or report any issue.
Here is the syntax of <textarea> tag in HTML.
<label>Enter Your Message : </label>
<textarea> </textarea>Between the textarea tags, we don’t need to add any specific text, although we can add id attribute, name attribute, which can be used to identify and process the data entered in the <textarea> element on the backend server.
Now, let’s add this textarea element in our HTML Form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> <br> <br> <label>Enter Your Telephone Number : </label> <input type="tel" placeholder="(123) 456-7890"> <br> <br> <label>Enter your marks : </label> <input type="number" value="1"> <br> <br> <label>Enter Your Message : </label> <textarea> </textarea> </form>
HTML Submit Button
HTML Submit button allows the user to submit the form data. Here is a syntax for creating a simple HTML Submit button.
<input type ="submit" value="submit">Now let’s add this submit button in our HTML form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> <br> <br> <label>Enter Your Telephone Number : </label> <input type="tel" placeholder="(123) 456-7890"> <br> <br> <label>Enter your marks : </label> <input type="number" value="1"> <br> <br> <label>Enter Your Message : </label> <textarea> </textarea> <br> <br> <input type="submit"> </form>
HTML Reset Button
HTML Reset Button is used to create a button in an html form, that allows users to reset all the values of input fields to their initial values.
Here is the syntax for creating an HTML Reset Button on a web form.
<input type="reset">Now let’s add this reset button in our HTML form.
<form> <label>Name : </label> <input type="text" placeholder= "Your Name...."> <br> <br> <label>Password : </label> <input type="password" placeholder = "Type your password..."> <br> <br> <label>Gender : </label> <input type="radio" name="Gender">Male <input type="radio" name="Gender">Female <input type="radio" name="Gender">Other <br> <br> <label>Your Skills : </label> <input type ="checkbox">HTML <input type ="checkbox">CSS <input type ="checkbox">JavaScript <input type ="checkbox">PHP <input type ="checkbox">Java <br> <br> <label>Date of Birth : </label> <input type = "date"> <br> <br> <label>Upload a File : </label> <input type="file"> <br> <br> <label>Enter URL of your Website : </label> <input type ="url" placeholder="https://example.com" name="website" required> <br> <br> <input type="image" src="https://crus4.com/wp-content/uploads/2023/04/arrow.jpg" alt="Submit" width="100px" height="100px"> <br> <br> <label>Pick a Color : </label> <input type="color" name="background_color" value="#000000"> <br> <br> <label>Select the range : </label> <input type="range" min="0" max="100" value="50"> <br> <br> <label>Enter Your Telephone Number : </label> <input type="tel" placeholder="(123) 456-7890"> <br> <br> <label>Enter your marks : </label> <input type="number" value="1"> <br> <br> <label>Enter Your Message : </label> <textarea> </textarea> <br> <br> <input type="submit"> <input type="reset"> </form>
Generally it’s not considered a good practice to use reset button in HTML forms. This is because, by if any chance, user clicks on the reset button, then he has to retype all his form data.
Create a Form in HTML
Share This Post!
