So, you are searching for how to create an HTML form for your web development project? Don’t worry! We are here to help you out.
Web forms or HTML forms are useful in collecting data and information in the form of user input that we can process later. This can be a review, email ID, address, contact, and more. In this article, we will tell you how you can create HTML forms to collect information from your users.
Summary Of The Article:
An HTML form stores information provided by the users with the help of responsive controls.
With the help of various input elements, we can collect data like username, password input, and text input, and ask the users to select options from a checkbox or a list.
With HTML, we can create a basic structure of a form. This can then be made visually appealing with the help of CSS and JavaScript.
CSS forms add styling properties, while JavaScript can make it dynamic.
There are a lot of elements and tags in HTML to make detailed and long forms.
What Is An HTML Form? Why Is It Used?
In Hyper-Text Markup Language or HTML, forms are documents that are used to store or collect user input. This user input is then sent to the server for further processing using interactive controls.
HTML forms can contain a variety of input types like user name, contact, email, address, additional comments, etc. Forms in HTML can also be of various types like a registration or login form, a payment form, etc.
HTML forms or web forms bring responsiveness to your website. Therefore, they are a great way of facilitating user interactions and bringing life to your web page.
Let us now discuss the basic structure of an HTML form. Read below to learn more about HTML forms!
What Is The Basic Structure Of An HTML Form?
In this section, I will tell you about the components of an HTML form and how these are arranged to successfully create it in HTML. Continue reading to know about it!
The <form> tag in HTML
An HTML form is created by using the ‘form’ tag. It is represented by: <form> and contains different attributes.
All the lines of code written within the form tag represent the form elements. It needs both the opening and closing tag. Therefore, we can write it in the following way:
<form>
// body containing form elements
</form>
The elements of an HTML form include a checkbox, text box, submit buttons, radio buttons, drop-down menus, and more. You can also check how styling can enhance forms by exploring our list of the 10 Best Online HTML Editor Tools for easier development and preview.
All these elements help in seamless interaction and accurate data input and storage.
The <input> element in HTML
The main purpose of an HTML form is to collect user input. But how is it done? For this, we have a form element named the <input> element.
The input element is the most basic element that helps us to get the form data. With the help of its various attributes, we can collect different information. Some of the attributes related to <input> are:
Type attribute
Name attribute
We will discuss more about these in further sections. A simple example representing the <input> element is given below.
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Form</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"84133572-85e0-4d35-8959-85e7f87e3447","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"f68fcea1-589b-4107-b16b-c3ce4b166baf","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>
Login Form
</h1>
<form>
Username<br>
<input type = "text" name = "username"><br>
Password<br>
<input type = "text" name = "password">
</form>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script><script>document.documentElement.classList.remove('no-js');document.addEventListener('DOMContentLoaded',function(){var lazyImages=[].slice.call(document.querySelectorAll('img[loading="lazy"]'));if('IntersectionObserver' in window){var lazyImageObserver=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){var lazyImage=entry.target;lazyImage.classList.add('loaded');lazyImageObserver.unobserve(lazyImage)}})});lazyImages.forEach(function(lazyImage){lazyImageObserver.observe(lazyImage)})}else{lazyImages.forEach(function(img){img.classList.add('loaded')})}});</script>
</body>
</html>
The output or the web form created with this code is given in the image below.
Output:
We can see that the <input> element created a rectangular box for us to specify the user input. Notice the type attribute and the name attribute here. We will get to know more about these in depth below. This was just a simple design, we will create more detailed HTML forms in the further sections.
Essential Elements And Their Attributes In HTML Web Forms
HTML provides us with various elements to collect and organize the form data. Input elements and Input fields can help us enhance our HTML form. Understanding these elements and each attribute allows us to make HTML forms functional.
Now, let us get to know about the commonly used elements and their attributes below.
The <form> element
This is used as a container for all the input elements in an HTML form. It consists of the following attributes:
action attribute: An HTML form’s action attribute specifies the URL for processing input data submitted by the user.
method attribute: It specifies the HTTP method to process form data. For example: the GET or POST method.
enctype attribute: It specifies the type for data encryption.
Modifying this in the code example gives us the following HTML form structure.
<form action = "/submit" method = "post">
Username<br>
<input type = "text" name = "username"><br>
Password<br>
<input type = "text" name = "password">
</form>
The <input> element
The input element is responsible for creating interactive controls for user input. It has some common control types and attributes. Let us see both of these below.
Attributes of <input>
type attribute: The type attribute in HTML specifies the input type for the form data.
name attribute: This attribute specifies the name of the input and it is used to identify form data when it is submitted.
value attribute: It specifies the initial value of the input.
placeholder attribute: It specifies the text displayed in place of the input when it is empty.
Common types for <input>
text: For single-line text input
password: For password input. It hides the value entered by the user in the password field.
email: For validating the email format.
number: For numeric input type.
radio: For letting the user select one option of many.
checkbox: For letting the user select one or more than one option.
submit: For the submit button.
Now, let us see how and where we can include these attributes and control types in our HTML code and see how our web form looks.
HTML Example:
<form action = "/submit" method = "post">
Username<br>
<input type="text" name="username" placeholder="Enter your username" required><br>
Password<br>
<input type="password" name="password" placeholder="Enter your password" required><br>
Email ID<br>
<input type="email" name="email" placeholder="Enter your email" required><br>
</form>
After including the necessary type attributes, we will see the below-given changes in our form. A new input field for email ID is added to our HTML login form. We can also see the placeholder text in place for the input.
Output:
The <textarea> element
We know that the type ‘text’ is used for single-line text input. But what if we have to take multi-line input from the user? For this, we have the <textarea> tag. Let us see some of its attributes as well.
Attributes for <textarea>
name attribute: It specifies the name of the text area.
rows: It specifies the number of visible lines for the input text.
cols: It specifies the visible width for the text area.
Now, let us also add this element tag to our HTML form code. Have a look at the example code.
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Form</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"84133572-85e0-4d35-8959-85e7f87e3447","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"f68fcea1-589b-4107-b16b-c3ce4b166baf","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>
Login Form
</h1>
<form action = "/submit" method = "post">
Username<br>
<input type="text" name="username" placeholder="Enter your username" required><br>
Password<br>
<input type="password" name="password" placeholder="Enter your password" required><br>
Email ID<br>
<input type="email" name="email" placeholder="Enter your email" required><br>
Enter Your Message<br>
<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
</form>
</body>
</html>
Let us now have a look at the resulting HTML form after adding the text area form element as the input field to it. Now, you can type in multi-line input type as form data. The image below represents our output HTML form.
Output:
The <select> and <option> elements
The select and option tags are used to create a drop-down menu and define the options in the list respectively. Now, let us have a look at some of the attributes for the same.
Attributes For <select> and <option>
name attribute: For the name of the select element.
multiple: It is used in case you need to select more than one element.
Let us modify this form element in our HTML code and see how does our form looks. The code is given below.
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Form</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"84133572-85e0-4d35-8959-85e7f87e3447","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"f68fcea1-589b-4107-b16b-c3ce4b166baf","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>
Login Form
</h1>
<form action = "/submit" method = "post">
Username<br>
<input type="text" name="username" placeholder="Enter your username" required><br>
Password<br>
<input type="password" name="password" placeholder="Enter your password" required><br>
Email ID<br>
<input type="email" name="email" placeholder="Enter your email" required><br>
Choose The Service You Want To Avail<br>
<select name="services">
<option value="option1">HTML assignment</option>
<option value="option2">CSS assignment</option>
<option value="option3">JavaScript assignment</option>
</select><br>
Enter Your Message<br>
<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
</form>
</body>
</html>
Now that we have added our list of options to our form, the user can select these options and the selected one becomes our input. The following image shows how the HTML form looks.
Output:
The <label> element
The form label element or tag is used to provide a label for the input element. This enhances accessibility. It is just like a caption that you can use for a particular element. The code snippet shows how we can use it in forms.
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required><br>
The <button> element
So far, we have discussed a lot of common form elements. But, what about that one element that fulfills the purpose of HTML forms? I’m talking about the element that allows form submission.
The <button> element represents a clickable button. In our case, it can be the submit button, the reset button, the cancel button, or any other. For example, in a payment form, you can have the pay button and the exit transaction button.
So, let us add the submit button to our form. The syntax to make a submit button is given below.
<button type="submit">Submit</button>
After including this in our code, we will be able to see a simple button to submit the user data. When the user clicks on it, all the form information is sent to the server. Let us see how our HTML form finally looks with the submit button and filled input fields.
Output:
HTML Form For Payment Card Checkout With Code
In the above section, we were taking the example of a basic login form. Now, let us try to create an HTML form for the checkout process. For this, we first have to decide what input fields do we need.
In this case, the input fields can be the following:
Card number – numeric input type
Card-holder name – text input type
Expiry Date – date
CVV – password input type
Remarks – text area
Checkbox for additional input. – checkbox element
We will also include two buttons:
Pay
Cancel
Now, let us implement these to create an HTML form. The example code for it is given below.
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Payment Card Checkout Form</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"84133572-85e0-4d35-8959-85e7f87e3447","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"f68fcea1-589b-4107-b16b-c3ce4b166baf","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="form-container">
<h2>Checkout Form</h2>
<b>Your total is = $12</b><br><br>
<form action="/submit-payment" method="post">
<div class="form-group">
<label for="card-number">Card Number:</label>
<input type="number" id="card-number" name="card-number" required>
</div>
<div class="form-group">
<label for="card-holder-name">Card-holder Name:</label>
<input type="text" id="card-holder-name" name="card-holder-name" required>
</div>
<div class="form-group expiry-group">
<label for="expiry-month">Expiry Date:</label>
<select id="expiry-month" name="expiry-month" required>
<option value="" disabled selected>Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="expiry-year" name="expiry-year" required>
<option value="" disabled selected>Year</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
</select>
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="password" id="cvv" name="cvv" required>
</div>
<div class="form-group">
<label for="remarks">Remarks:</label>
<textarea id="remarks" name="remarks" rows="2"></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="additional-input" name="additional-input">
<label for="additional-input">Save this card for later?</label>
</div>
<div class="form-group button-group">
<button type="submit">Pay</button>
<button type="button" onclick="window.location.href='/cancel'">Cancel</button>
</div>
</form>
</div>
</body>
</html>
Here, we have used a form label for each element and also included the month and year type as the input field for the expiry date. Let us now see the output form that we get.
Output:
But, this structure doesn’t look that clean. Here is when we can introduce CSS in it. We can create a CSS form for this checkout process. CSS forms gives style to our web forms and make it more structured. You can also make a form using pure CSS.
So, let us modify the above code and add style to it. The modified code for the CSS form is given below.
HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Checkout Form</title>
<style></style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}.rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https://codingzap.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-84133572-85e0-4d35-8959-85e7f87e3447: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"84133572-85e0-4d35-8959-85e7f87e3447","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-f68fcea1-589b-4107-b16b-c3ce4b166baf: url('https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"f68fcea1-589b-4107-b16b-c3ce4b166baf","url":"https:\/\/codingzap.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="form-container">
<h2>Checkout Form</h2>
<b>Your total is = $12</b><br><br>
<form action="/submit-payment" method="post">
<div class="form-group">
<label for="card-number">Card Number:</label>
<input type="number" id="card-number" name="card-number" required>
</div>
<div class="form-group">
<label for="card-holder-name">Card-holder Name:</label>
<input type="text" id="card-holder-name" name="card-holder-name" required>
</div>
<div class="form-group expiry-group">
<label for="expiry-month">Expiry Date:</label>
<select id="expiry-month" name="expiry-month" required>
<option value="" disabled selected>Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="expiry-year" name="expiry-year" required>
<option value="" disabled selected>Year</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
</select>
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="password" id="cvv" name="cvv" required>
</div>
<div class="form-group">
<label for="remarks">Remarks:</label>
<textarea id="remarks" name="remarks" rows="2"></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="additional-input" name="additional-input">
<label for="additional-input" style = "margin: 0">Save this card for later?</label>
</div>
<div class="form-group button-group">
<button type="submit">Pay</button>
<button type="button" onclick="window.location.href='/cancel'">Cancel</button>
</div>
</form>
</div>
</body>
</html>
Let us also compare the new form output using HTML and CSS together with the previous one that was only using HTML. The new form is given below.
Output:
Looks much clear, right? This is how you can create HTML forms! And if you’re designing a contact form or feedback section, don’t forget to enrich it with visual elements. Here’s a quick tutorial on How To Use Image Tag In HTML to enhance form headers and branding.
Conclusion:
So you saw how to create HTML forms. We also discussed various input fields like password field, text input field, etc. Using CSS while designing forms also makes them more visually appealing and clear. With a clean background and proper styling, we can create a well-designed form.
So, why don’t you get started and create an HTML form? Perhaps, a responsive contact form with radio buttons and a progress bar? And in case you require any assistance, with your projects or tasks, don’t hesitate to reach out through our HTML Assignment Help service. We’re here to guide you!
Takeaways:
HTML forms are a way to collect a user’s information and process it. This can be a comment, a subscription form, a payment form, etc.
Each user input is written in an associated input field that specifies what kind of content it is.
We can also include radio buttons, checkboxes, password input, etc as per the requirement of our form.
To make the form more visually appealing and clear, we can add styling using CSS as well.
