Form Creation Basis

The HTML <form> element is a fundamental building block for creating interactive forms on a web page. It serves as a container for all the form elements. Let's explore an example of a basic form:

Note

All examples have the following attribute onsubmit="return false". This attribute in the examples prevents the form from sending a request by default. It's used here for demonstration purposes to focus on form creation and attributes, but this course has other focuses.

Explanation of the form attributes:

• name provides a distinct identifier for the form on a webpage. Both the server and client use this identifier to process the form data. The form name may include numbers, underscores, dashes, and English alphabet characters, but it must not contain any spaces;
• autocomplete determines whether web browsers can fill out form fields automatically. It can be set to "on" or "off" and applied to individual form elements;
• novalidate specifies that browsers should not perform form field validation. This can be useful when you want to handle validation manually using JavaScript;
• method specifies the HTTP method used to send the form data to the server. The two most common methods are GET and POST. This topic will be covered in-depth in the JavaScript course.

The form includes the following form elements:

• <input> element allows users to input different data types, such as text, numbers, dates, etc. In this example, we use the type="email" for the email field and type="password" for the password field;
• <label> element helps to organize and structure the form. It also provides a label for each input field, indicating what the input is responsible for;
• <button> element with type="submit" is used to submit the form data to the server when clicked. By default, when the submit button is pressed, the data from the inputs is sent to the server, and the web page reloads. However, this behavior can be overridden using JavaScript.

Note

When a user press <button type="submit">, all data in inputs are sent to the server, and a web page reloads. It is the default behavior.