表单标签用于收集用户输入,为用户输入创建 HTML 表单。
注:一般用于网页上“注册”、“登录”、“搜索”等功能的编译。
表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 textarea、fieldset、legend和table元素。
表单用于向服务器传输数据。
一、<form>表单标签——双标签
<form>
元素包裹文档中的一个区域,叫做“表单域”。此区域包含交互控件,用于创建供用户输入的 HTML 表单,包裹表单信息,并向 Web 服务器提交。
注:<form>标签用于区分“表单域”,无明显显示效果。清楚源代码各表单结构,方便后续的源代码修改和对接。
注:后续有些标签的属性值需要在同一个表单域之内才能生效。
二、input输入系列标签——单标签
注:编译于<body><form><input type="属性值"></form></body>
注:标签<type="text">为默认属性值。
注:<input>标签不会自动换行,正常换行需要加入换行标签<br>。
注:根据“type”属性值的不同,<input>标签将会生成不同的网页效果。
type属性值 | 属性说明 |
text | 默认属性值,文本框,可输入单行文本 |
password | 密码框,用于输入密码,所输入内容自动隐藏,用“*”代替 |
radio | 单选框(圆点框),用于多选一 |
checkbox | 多选框(方形框),用于多选多 |
file | 文件选择,用于上传文件 |
submit | 提交按钮,用于提交表单信息 |
reset | 重置按钮,清除所输入信息 |
button | 普通按钮,默认无效果,结合JS使用 |
练习代码:
<body>
<form action="#">
文本框显示:<input type="text">
<br>
密码框显示:<input type="password">
<br>
单选框显示:<input type="radio">
<br>
多选框显示:<input type="checkbox">
<br>
文件上传按钮显示:<input type="file">
<br>
提交按钮显示:<input type="submit">
<br>
重置按钮显示:<input type="reset">
<br>
普通