Learn HTML Basics to Advance in 7 Days: Day Seven

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

HTML Forms and Form Elements

Welcome to Day Seven, the final day of learning HTML basics to advance in 7 days. Today, we will cover HTML forms and form elements. Forms are used to collect user input on web pages, such as login forms, contact forms, and search forms.

The <form> Element

The <form> tag is used to create an HTML form. The action attribute specifies where to send the form data, and the method attribute specifies the HTTP method (GET or POST) for sending the form data.

Here is an example of a basic form:

<form action="/submit-form" method="post">
    Form elements go here...
</form>
                

The action attribute specifies "/submit-form" as the URL where the form data will be sent, and method="post" specifies that the form data will be sent using the POST method.

Form Input Elements

There are different types of form input elements that can be used inside a <form> tag to collect user input:

• <input> - Used for various types of input, such as text, password, checkbox, radio buttons, etc.
• <textarea> - Used for multi-line text input.
• <select> - Used for creating drop-down lists.
• <button> - Used for creating buttons inside forms.

Here is an example of using the <input> tag:

<label for="username">Username:</label>
<input type="text" id="username" name="username">
                

This creates a text input field where users can enter their username.

Form Attributes

Forms can have several attributes that control their behavior and appearance:

• action - Specifies where to send the form data.
• method - Specifies the HTTP method for sending form data (GET or POST).
• name - Specifies the name of the form.
• target - Specifies where to display the response after submitting the form (e.g., "_self", "_blank").
• autocomplete - Specifies whether the browser should autocomplete the form input fields.

Here is an example using some of these attributes:

<form action="/submit-form" method="post" name="loginForm" target="_self" autocomplete="on">
    Form elements go here...
</form>
                

Form Validation

HTML5 introduces built-in form validation to improve user experience and reduce errors in form submission. Validation can be done using attributes such as required, pattern, min, max, etc.

Here is an example of using the required attribute:

<input type="text" id="username" name="username" required>
                

This attribute specifies that the username field must be filled out before submitting the form.

Styling Forms

While we are not using CSS in this tutorial, forms can be styled using CSS to enhance their appearance and usability. You can style form elements, labels, and buttons to match your website's design.

Here is an example of a simple CSS rule for styling form elements:

input[type="text"], input[type="password"], textarea, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}
                

This CSS rule styles text input fields, password input fields, textareas, select dropdowns, and submit buttons.

Conclusion

Congratulations on completing the 7-day journey to learn HTML basics to advance! Today, we covered HTML forms and form elements, which are essential for collecting user input on web pages. Forms allow you to create interactive and user-friendly web experiences. Practice creating different types of forms and experimenting with form attributes to enhance your HTML skills.

FAQ

What is the purpose of the <form> tag?

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

How do you create a text input field in HTML?

Use the <input> tag with type="text" to create a single-line text input field.

What is form validation in HTML?

Form validation ensures that user input is correct and meets specified criteria before submitting the form.

How can you style form elements using CSS?

Form elements can be styled using CSS to change their appearance, size, color, and layout.

What are some common form attributes?

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