Learn HTML Basics to Advance in 7 Days: Day Four

• Day One
• Day Two
• Day Three
• Day Four
• Day Five
• Day Six
• Day Seven

HTML Forms

Welcome to Day Four of learning HTML. Today, we will explore HTML forms in greater detail. Forms are essential for collecting user input and interacting with web applications.

Forms are created using the <form> tag. This tag contains various form elements like text fields, checkboxes, radio buttons, and submit buttons.

Form Elements

Let's look at some common form elements:

• Text Input (<input type="text">) - Allows users to enter text.
• Password Input (<input type="password">) - Allows users to enter a password. The characters are masked.
• Email Input (<input type="email">) - Allows users to enter an email address. The input is validated for proper email format.
• Checkbox (<input type="checkbox">) - Allows users to select one or more options.
• Radio Button (<input type="radio">) - Allows users to select one option from a set.
• Submit Button (<input type="submit">) - Submits the form data to the server.

Here is an example of a form with these elements:

<form action="submit_form.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label for="subscribe">Subscribe to newsletter:</label>
    <input type="checkbox" id="subscribe" name="subscribe"><br><br>
    
    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male"> Male
    <input type="radio" id="female" name="gender" value="female"> Female<br><br>
    
    <input type="submit" value="Submit">
</form>
                

Form Attributes

Form attributes provide additional information about how the form should behave. Here are some important attributes:

• action - Specifies the URL where the form data will be sent for processing.
• method - Specifies the HTTP method to be used when sending the form data (GET or POST).
• name - Specifies the name of the form.
• target - Specifies where to display the response after submitting the form (_blank, _self, _parent, _top).
• autocomplete - Specifies whether the form should have autocomplete on or off.

Here is an example using some of these attributes:

<form action="submit_form.php" method="post" name="userForm" target="_self" autocomplete="on">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <input type="submit" value="Login">
</form>
                

Advanced Form Elements

In addition to basic form elements, HTML5 introduces several new input types:

• Color Input (<input type="color">) - Allows users to select a color.
• Date Input (<input type="date">) - Allows users to select a date.
• Range Input (<input type="range">) - Allows users to select a value from a range using a slider.
• Number Input (<input type="number">) - Allows users to enter a number.
• URL Input (<input type="url">) - Allows users to enter a URL. The input is validated for proper URL format.

Here is an example using these advanced input types:

<form>
    <label for="favcolor">Favorite Color:</label>
    <input type="color" id="favcolor" name="favcolor"><br><br>
    
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>
    
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100"><br><br>
    
    <label for="website">Website:</label>
    <input type="url" id="website" name="website"><br><br>
    
    <input type="submit" value="Submit">
</form>
                

Form Validation

HTML5 introduces built-in form validation. This helps ensure that users provide correct and complete information before submitting the form. Here are some validation attributes:

• required - Specifies that an input field must be filled out before submitting the form.
• pattern - Specifies a regular expression that the input field's value must match.
• min and max - Specify the minimum and maximum values for an input field.
• minlength and maxlength - Specify the minimum and maximum number of characters for an input field.
• step - Specifies the interval between legal numbers in an input field.

Here is an example using some of these validation attributes:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="4" maxlength="12"><br><br>
    
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" required min="18" max="99"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required pattern=".{8,}" title="Eight or more characters"><br><br>
    
    <input type="submit" value="Register">
</form>
                

In this example, the username must be between 4 and 12 characters, the age must be between 18 and 99, and the password must be at least 8 characters long.

Form Accessibility

Making forms accessible ensures that all users, including those with disabilities, can use your form. Here are some tips for creating accessible forms:

• Use the <label> tag to associate labels with form elements.
• Ensure that form elements have meaningful labels and instructions.
• Use fieldsets and legends to group related form elements.
• Provide clear and concise error messages.

Here is an example of an accessible form:

<form>
    <fieldset>
        <legend>Personal Information</legend>
        
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname" required><br><br>
        
        <label for="lname">Last Name:</label>
        <input type="text" id="lname" name="lname" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
    </fieldset>
    
    <input type="submit" value="Submit">
</form>
                

Conclusion

Today, we covered HTML forms, including basic and advanced form elements, form attributes, form validation, and form accessibility. Forms are a crucial part of web development, allowing for user interaction and data collection. Practice creating forms with various elements and attributes to become more comfortable with this important aspect of HTML.

FAQ

What is the purpose of the <form> tag?

The <form> tag is used to create a form for collecting user input.

What are some common form elements?

Common form elements include text input, password input, email input, checkboxes, radio buttons, and submit buttons.

What attributes are commonly used with the <form> tag?

Common attributes include action, method, name, target, and autocomplete.

How can you validate form input?

HTML5 provides built-in form validation attributes such as required, pattern, min, max, minlength, and maxlength.

How can you make forms accessible?

To make forms accessible, use labels, ensure form elements have meaningful labels and instructions, group related form elements with fieldsets and legends, and provide clear error messages.