HTML Forms

By Tony 2023.4.8

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:

This is an HTML form's code:

<form action="">
www<input type="radio" id="input">
www<label for="input">Choice 1<label>
www<br>
www<button type="submit">Submit</button>
<form>
<script src="script.js"><script>

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 of the example, we have <script> tags. These tags are not related to forms; instead, they link a JavaScript document to an HTML file so that JavaScript code can be executed. Below is the output of the code above:

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!