Create Forms
Forms are used to interact with website users. Website users can make inputs or select items provided by the website. Then, the users can submit their inputs or choices to the web server.
Note: In this course, we cover how to create forms using HTML and CSS. HTML and CSS only provide a structure and visual representation of forms. To actually process the user input data, you need to learn programing languages such as JavaScript, Python, PHP, Ruby or other languages.
<form>
To create a form, use the <form> tag. You can design a form with multiple components. The form components should be nested within the <form> tag. The components under one form element are treated as one set of forms.
For example, you can design a form with input, radio button, text area, and submit button. All data input by the user in various components will be submitted together when the user presses the submit button.
Key Form Components
1. Input field: <input>
An input field is used when you want to allow users to input one-line text data. The <input> element is a void element. Thus, no end tag is required. There are different types of text you can set using the type attribute.
2. Text Area: <textarea>
The <textarea> tag is used for multi-line text data input. Unlike for <input>, you need an end tag for this.
3. Radio Button: <input type="radio">
Radio buttons are used to ask users to select one answer from a list of options. The <input> tag is also used to create ratio buttons, but with radio as the type attribute value.
4. Checkbox: <input type=”checkbox”>
Checkboxes are used when you want to allow users to select multiple answers from a list of options. The <input> tag is also used to create checkboxes, but with checkbox as the type attribute value.
5. Select Box: <select> + <option>
Similarly to radio buttons, a select box, also called a drop-down list or pull-down list, is used to ask users to select one answer from a list of options. However, options in the select box are hidden until users click or tap the box. Tags used to create a select box are <select> and <option>. You need to nest the <option> elements within the <select> element. By adding the multiple attributes, you can change a single selection to multiple selections.
6. Submit Button: <button type=”submit”><button>
A submit button is used to submit data input in a form on the website. To submit the data, you need a programing language such as JavaScript, PHP or Python.
Key Attributes
There are some attributes used in programing to process data from input forms. We don't cover how to process the data in this course, but you may encounter the following attributes in the <form> tags when you read HTML documents. For now, just keep in mind that those attributes are used in programming for processing user data input.
action: Defines where to send the form data when a form is submitted (e.g., URL).
method: Defines the HTTP method to use when sending form data (e.g., get or post).
name: Defines the name of the form.
Forms are used to interact with website users. Website users can make inputs or select items provided by the website. Then, the users can submit their inputs or choices to the web server.
Note: In this course, we cover how to create forms using HTML and CSS. HTML and CSS only provide a structure and visual representation of forms. To actually process the user input data, you need to learn programing languages such as JavaScript, Python, PHP, Ruby or other languages.
<form>
To create a form, use the <form> tag. You can design a form with multiple components. The form components should be nested within the <form> tag. The components under one form element are treated as one set of forms.
For example, you can design a form with input, radio button, text area, and submit button. All data input by the user in various components will be submitted together when the user presses the submit button.
Key Form Components
1. Input field: <input>
An input field is used when you want to allow users to input one-line text data. The <input> element is a void element. Thus, no end tag is required. There are different types of text you can set using the type attribute.
2. Text Area: <textarea>
The <textarea> tag is used for multi-line text data input. Unlike for <input>, you need an end tag for this.
3. Radio Button: <input type="radio">
Radio buttons are used to ask users to select one answer from a list of options. The <input> tag is also used to create ratio buttons, but with radio as the type attribute value.
4. Checkbox: <input type=”checkbox”>
Checkboxes are used when you want to allow users to select multiple answers from a list of options. The <input> tag is also used to create checkboxes, but with checkbox as the type attribute value.
5. Select Box: <select> + <option>
Similarly to radio buttons, a select box, also called a drop-down list or pull-down list, is used to ask users to select one answer from a list of options. However, options in the select box are hidden until users click or tap the box. Tags used to create a select box are <select> and <option>. You need to nest the <option> elements within the <select> element. By adding the multiple attributes, you can change a single selection to multiple selections.
6. Submit Button: <button type=”submit”><button>
A submit button is used to submit data input in a form on the website. To submit the data, you need a programing language such as JavaScript, PHP or Python.
Key Attributes
There are some attributes used in programing to process data from input forms. We don't cover how to process the data in this course, but you may encounter the following attributes in the <form> tags when you read HTML documents. For now, just keep in mind that those attributes are used in programming for processing user data input.
action: Defines where to send the form data when a form is submitted (e.g., URL).
method: Defines the HTTP method to use when sending form data (e.g., get or post).
name: Defines the name of the form.
