Web forms in HTML are essential for collecting user input, such as text, selections, or file
uploads, and are created using the <form> element. Inside a form, various input
elements like <input>, <textarea>,
<select>, and <button> are used to define fields for user
interaction.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="John Doe" required>
<br>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="john.doe@gmail.com" autocomplete="off"> <br>
<label for="dob">Date of Birth</label>
<input type="date" name="dob" id="DOB">
<br>
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="" disabled>Select Gender</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<br>
<label for="employment">Employed?</label>
<input type="radio" name="employment" id="employment" value="isEmployed"> Yes
<input type="radio" name="employment" id="employment" value="isNotEmployed"> No
</fieldset>
<fieldset>
<legend>Payment</legend>
<label for="cardNo">Account Number <span><abbr title="(16-digit number on your card)">?</abbr></span> </label>
<input maxlength="16" type="text" name="cardNo" id="cardNo" pattern="^(?:\0-9[ -]*?){13,16}$" required>
<label for="otp">Enter OTP</label>
<input minlength="6" maxlength="10" type="password">
</fieldset>
<fieldset>
<legend>Feedback</legend>
<label for="recommendation">To what extent would you recommend our service to your friends? </label>
0 <input min="0" max="10" type="range" name="recommendation" id="recommendation"> 10
<br>
<label for="detailedFeedback">Your Feedback in details</label>
<br>
<textarea id="detailedFeedback" name="detailedFeedback" cols="50" rows="6" ></textarea>
<hr>
<input type="checkbox" name="consent" id="consent" value="consentAware">
<label for="consentAware">I am aware that my feedback could be published and used for commercial purposes</label>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
The structure of a web form in HTML is built around the <form> element, which
acts as a container for all input fields and controls. Inside the <form>,
elements like <input>, <textarea>,
<select>, and <button> are used to create interactive fields
for user input. The <input> element is the most versatile, supporting various
types such as text, email, password, and
checkbox, while <textarea> allows for multi-line text input.
Dropdown menus are created using the <select> element with
<option> tags for each choice. Labels for form fields are provided using the
<label> element, which improves accessibility by associating text with its
corresponding input. Buttons, such as <button> or
<input type="submit">, are used to submit or reset the form. Attributes like
name, placeholder, required, and autocomplete
enhance functionality and user experience. Proper structuring of web forms ensures clarity,
accessibility, and efficient data collection.
<form>
<fieldset>
<legend>Payment Information</legend>
<div>
<label for="cardNo">Card Number <span><abbr title="(16-digit number on your card)">?</abbr></span>
</label>
<input
maxlength="16"
type="text"
name="cardNo"
pattern="\d{16}"
id="cardNo"
placeholder="1234 5678 9012 3456"
required>
</div>
<div>
<label for="expiration">Expiration Date</label>
<input type="text" id="expiration" name="expiration" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$" placeholder="mm/yy" required>
</div>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Pattern matching in web forms is a powerful feature of HTML that allows developers to enforce
specific formats for user input using regular expressions (regex). The pattern
attribute, used with <input> elements, defines a regex pattern that the input
value must match for the form to be submitted. This is particularly useful for validating data like
phone numbers, email addresses, credit card numbers, or dates. For example, a pattern like
\d{16} ensures a 16-digit card number, while ^(0[1-9]|1[0-2])\/([0-9]{2})$
validates an expiration date in MM/YY format. When the input doesn’t match the pattern,
the browser displays a validation error, improving data accuracy and user experience. Pattern
matching is especially valuable for client-side validation, reducing the need for additional
JavaScript or server-side checks. However, it should be complemented with server-side validation for
security, as client-side validation can be bypassed. Proper use of pattern matching ensures that web
forms collect clean, structured, and valid data.
GET and POST methods
<form method="POST">
<h2>Sign In</h2>
<p>
<label for="username">username</label>
<input type="text" name="username" id="username" placeholder="Enter Username" required>
</p>
<p>
<label for="password">password</label>
<input type="password" name="password" id="password" placeholder="Enter Password" required>
</p>
<p>
<button>Login</button>
</p>
<input type="checkbox" name="rememberMe" id="rememberMe">
<label for="rememberMe">Remember Me</label>
<p>Don't have an account? <a href="#">Create Account</a></p>
</form>
Web form submission methods in HTML determine how data is sent from the client to the server. The two primary methods are GET and POST, specified using the method attribute in the <form> element. The GET method appends form data to the URL as query parameters, making it visible in the browser's address bar. This method is suitable for non-sensitive data, such as search queries, where bookmarking or sharing the URL is useful. On the other hand, the POST method sends form data in the body of the HTTP request, keeping it hidden from the URL. This method is ideal for sensitive or large amounts of data, such as login credentials or file uploads. The action attribute in the <form> element specifies the URL where the data is sent for processing.
action attribute
<form action="welcome.html">
<h2>Sign In</h2>
<p>
<label for="user">username</label>
<input type="text" name="user" id="user" placeholder="Enter Username" required>
</p>
<p>
<label for="pass">password</label>
<input type="password" name="password" id="pass" placeholder="Enter Password" required>
</p>
<p>
<button>Login</button>
</p>
<input type="checkbox" name="rememberMe" id="remMe">
<label for="remMe">Remember Me</label>
<p>Don't have an account? <a href="#">Create Account</a></p>
</form>
The action attribute in an HTML form specifies the URL where the form data is sent when the form is submitted. This URL can point to a server-side script (e.g., PHP, Node.js, Python) or a static page that processes the data. The action attribute works in conjunction with the method attribute, which defines how the data is sent (e.g., GET or POST). For example, action="submit.php" sends the form data to a PHP script for processing, while action="/submit" might route the data to a server endpoint. If the action attribute is omitted, the form submits to the current page by default.