04. HTML forms: input fields, buttons, and validation
Hello web-spiders! 😉 Welcome back to 4th module of this series course. In this module, we discuss about forms in HTML.
Forms in HTML
HTML forms are an essential part of web development that allows users to input and submit data. They consist of various elements, including input fields, buttons, and validation mechanisms.
Overall, HTML forms, with their input fields, buttons, and validation mechanisms, allow for user interaction, data collection, and submission on web pages. Here's a breakdown of each component:
â–º Input fields
Input fields in HTML forms are used to collect user input. Some common types of input fields include:
Text input:
<input type="text">allows users to enter single-line text.Password input:
<input type="password">hides the entered text for secure password input.Number input:
<input type="number">restricts input to numeric values.Email input:
<input type="email">validates that the input is in email format.Checkbox input:
<input type="checkbox">allows users to select multiple options.Radio button input:
<input type="radio">allows users to select a single option from a group.
inside the input opening tag, the type attribute is gonna describe how and in which format the input will be taken. See it through the code:
<body>
<input type="text" name="username" placeholder="Enter your username">
<input type="password" name="password" placeholder="Enter your password">
<input type="number" name="age" min="18" max="100">
<input type="email" name="email" placeholder="Enter your email">
<input type="checkbox" name="interests" value="music"> Music
</body>
type="text"
The
type="text"attribute specifies that it is a text input field.The
name="username"attribute assigns a unique name to the input field, which is used to identify the field in the form submission data.The
placeholder="Enter your username"attribute displays a placeholder text inside the input field as a prompt to the user.
type="password"
- The
type="password"attribute masks the entered text to provide secure password input.
type="number"
The
type="number"attribute restricts input to numeric values.The
min="18"andmax="100"attributes define the minimum and maximum allowed values for the input field.
And same is happening with other type attributes.
â–º Buttons
Buttons are used to trigger actions within a form. Some commonly used buttons include:
Submit button:
<input type="submit">sends the form data to the server for processing.Reset button:
<input type="reset">clears the form fields to their initial values.Custom buttons:
<button>can be used to create custom buttons with custom styling and JavaScript functionality.
<form action="/submit-form" method="post">
<!-- Form fields go here -->
<input type="submit" value="Submit"><br>
<input type="reset" value="Reset">
</form>
Now, it's time to finish the the last topic the blog.
â–º Validation
Form validation is a crucial aspect of creating user-friendly and secure web forms. It ensures that the data submitted by users meet certain requirements or constraints. HTML provides built-in validation attributes that help streamline this process. Some commonly used validation attributes include:
required: Specifies that an input field must be filled in before the form can be submitted.minandmax: Define the minimum and maximum values for numeric inputs.pattern: Allows you to specify a regular expression pattern that the input must match.maxlengthandminlength: Specify the maximum and minimum lengths of text inputs.
In addition to these built-in attributes, JavaScript can be used for more complex validation scenarios. By combining JavaScript with HTML validation attributes, you can create robust form validation routines that provide real-time feedback to users.
But, in this basic example we are using HTML only for validation.
<body>
<h2>Form Validation Example</h2>
<form name="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
Waooo... It's great we are done with one more module...
Hurrah! You have completed this module of the series Web Design Fundamentals: An HTML Primer for Beginners ►►►Click here to go to the next part of this series
After successful completion of this series course, you'll earn a certificate