HTML Forms

By Tony 2.18.2024

HTML form is a powerful tool for creating interactive elements on a webpage, such as input fields, options, and buttons. For example, you could use a form to allow users to register for an account by entering their name and email address in two separate input fields, and then submitting the form by clicking a submit button. Here is an example code of an HTML form:

The <form> tag is used to wrap up the contents of a form. The "action" attribute specifies what document or webpage the browser should load when the form is submitted. If left empty, the original page will reload. To create input fields that users can type into, the <input> tag is used. The "type" attribute defines the type of input field, such as number, text, password, or radio, which is a small circle that users can select.

The <label> tags are used to wrap up the label text, such as "Choice 1" above. When creating a form with multiple choices, label tags are user-friendly because the "for" attribute allows users to directly select a radio option by clicking on the label, rather than having to click the small circle of a radio input.

Finally, we have the <button> tag, which creates a clickable button for users. The "type" attribute of a button defines the type of a button. In the example shown earlier, we used a "submit" type button. This type of button is handy because users can simply hit "enter" and the form will be submitted to a web server or another document, without them actually clicking on the button.

At the bottom we have <script> tags. These tags are not related to forms; instead, they link the HTML page to a JavaScript code file so JavaScript can do something with the data entered in the form.

So that's basically all about HTML forms. To learn more, you can check out our references for tags and attributes. Have fun exploring HTML forms!

Bonus: HTML Selection

While inputs and buttons can be very useful and convenient, but too many of them may annoy people or take up a lot of space on your webpage. But no worries, you can use HTML selection to create dropdown menus to save space and make it more convenient for users. Here's an example:

In this example, we used three HTML form tags: <label>, <select>, and <option>.

• Label: Label tells the user what the dropdown menu of this HTML selection is for.
• Select: The select tags create a dropdown menu that the user can click on to open up a menu of option they can choose.
• Option: The option tags create an actual option in the dropdown menu. Put multiple option tags inside the select tags to create a functional dropdown menu. The value attribute tells the browser what the corresponding value of that option is.

With the help of the <select> tags, we created a dropdown menu and merged 8 different options into one little button, saving a lot of space, making the page comfortable, while maintaining the functionaily. You can also use selection to create forms or quizzes with many options. Try it out yourself to learn more!