HTML forms and input
HTML Forms and Input
HTML forms are used to collect different types of user input.
HTML Form
A form is an area that contains form elements.
Form elements allow users to enter content in the form, such as text areas, drop-down lists, radio-buttons, checkboxes, etc.
The form uses the form tag <form> to set up:
<form>
<input type="">
< input type="">
</form>
HTML form-input element
Form tags used in most cases is the input tag (<input>).
The input type is defined by the type attribute (type). The most commonly used input types are as follows:
Text Fields
Text fields are represented by the <input type="text"> tag Setting, when the user wants to type letters, numbers, etc. in the form, the text field will be used.
<form> 姓名: <input type="text" name="name"><br> 年龄: <input type="text" name="old"> </form>
Note: The form itself is not visible. Also, in most browsers, the default width of a text field is 20 characters.
The password field is defined by the tag <input type="password">:
<form> 密码: <input type="password" name="pwd"> </form>
Note: Password field characters will not be displayed in plain text, but will be replaced by asterisks or dots.
Radio Buttons
<input type="radio"> 标签定义了表单单选框选项 <form> <input type="radio" name="sex" value="male">男 <br> <input type="radio" name="sex" value="female">女 </form>
Checkboxes
<input type="checkbox"> defines a checkbox. The user needs to select one or several options from a number of given choices.
<form> <input type="checkbox" name="hobby" value="LOL">我喜欢玩LOL <br> <input type="checkbox" name="hobby" value="CF">我喜欢玩CF </form>
Submit Button
<input type="submit "> defines the submit button.
When the user clicks the confirm button, the content of the form will be transferred to another file. The form's action attribute defines the file name of the destination file. The file defined by the action attribute usually performs related processing on the input data received. :
<form name="input" action="html_form_action.php" method="get"> 用户名: <input type="text" name="user"> 密码: <input type="password" name="pwd"> <input type="submit" value="Submit"> </form>
Put the above content together:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> 姓名：<input type="text" name="name"><br/><br/> 性别：<input type="text" name="sex"><br/><br/> 年龄：<input type="text" name="old"><br/><br/> <input type="radio" name="sex" value="male">男 <br/><br/> <input type="radio" name="sex" value="female">女 <br/><br/> 我的爱好： <br/><br/> <input type="checkbox" name="hobby" value="LOL">LOL <br/><br/> <input type="checkbox" name="hobby" value="CF">CF <br/><br/> <input type="checkbox" name="hobby" value="DOTA">DOTA <br/><br/> 我的家乡： <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="xianggang">香港</option> </select> <br/><br/> 用户名: <input type="text" name="user"> <br/><br/> 密 码: <input type="password" name="pwd"> <br/><br/> <input type="submit" value="提交"> </form> </body> </html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
