df3a4db5ba
* Added info on label element Added information on the label element of a form and how to use the label element with a particular input element. * Capitalization
85 lines
2.4 KiB
Markdown
85 lines
2.4 KiB
Markdown
---
|
|
title: Forms
|
|
---
|
|
## Forms
|
|
|
|
HTML Form element defines a form that is used to collect user input.
|
|
Examples:
|
|
```html
|
|
<form>
|
|
contents
|
|
</form>
|
|
```
|
|
An HTML form contains form elements.
|
|
|
|
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
|
|
|
|
Inside the form tags there are also some important attribute which are:
|
|
`action` : the page that the data will sent to
|
|
|
|
`method` : type of request which are: 'GET' and 'POST'.
|
|
|
|
`GET`:
|
|
* Appends form-data into the URL in name/value pairs , so never use GET to send sensitive data.
|
|
* The length of a URL is limited (about 3000 characters).
|
|
|
|
`POST`:
|
|
* This method does not display the submitted form data in the page address field.
|
|
* Has no size limitation.
|
|
|
|
### The input element
|
|
It is the most important form element. Different types of input element are:
|
|
|
|
`text`: Defines a one-line text input field.
|
|
```html
|
|
<input type="text">
|
|
```
|
|
`radio`: Defines a radio button (for selecting one of many choices)
|
|
```html
|
|
<input type="radio">
|
|
```
|
|
`checkbox`: Checkboxes let a user select ZERO or MORE options of a limited number of choices.
|
|
```html
|
|
<form>
|
|
<input type="checkbox" name="food1" value="mango"> mango<br>
|
|
<input type="checkbox" name="food2" value="apple">apple
|
|
</form>
|
|
```
|
|
`submit`: Defines a submit button (for submitting the form)
|
|
```html
|
|
<input type="submit">
|
|
```
|
|
|
|
### The label Element
|
|
The label element is used to add a label for an input element. The label element has a `for` attribute, whose value is set to be the same as the `id` attribute of the input element - doing this associates the label element with the input element.
|
|
|
|
Here is an example of using the label element with an input element:
|
|
```html
|
|
<label for="firstName">First Name:</label>
|
|
<input type="text" id="firstName">
|
|
```
|
|
|
|
### The name attribute
|
|
If you want to submit the form that the input fields must contain the name attribute,if it is not present,
|
|
the data of that input field will not be sent at all.
|
|
In the below given example,only input type corresponding to first name will be submitted.
|
|
|
|
```html
|
|
<form action="my.php" method="post">
|
|
First name: <input type="text" name="firstname">
|
|
Last name: <input type="text">
|
|
<input type="submit" value="submit">
|
|
</form>
|
|
```
|
|
|
|
## Style input element with CSS
|
|
|
|
### :focus selector
|
|
The `:focus` selector is applied when the element accepts user inputs.
|
|
|
|
```css
|
|
input:focus {
|
|
background-color: #FFFF66;
|
|
}
|
|
```
|