表单标签
一个完整的表单通常由表单域、表单控件(表单元素)和提示信息三部分组成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于表单数据的提交方式,其取值为get或post |
name | 名称 | 用于制定表单的名称,以区分同一个页面中多个表单域 |
表单元素
<input>表单元素
用于收集用户信息。
<input type="属性值" />
type
type属性设置不同属性值用来指定不同的控件类型。
属性值 | 描述 |
---|---|
button | 定义可以点击的按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段 |
radio | 定义单选按钮 |
reset | 定义重置按钮 |
submit | 定义提交按钮。提交按钮会吧表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
<form action="xxx.php" method="get">
用户名:<input type="text" name="username" value="请输入用户名"><br>
密码: <input type="password" name="pwd">
<br>
<br>
性别:<br>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<br>
爱好:<br>
<input type="checkbox" name="hobby" value="游戏">游戏
<input type="checkbox" name="hobby" value="钢琴">钢琴
<input type="checkbox" name="hobby" value="阅读">阅读
<input type="checkbox" name="hobby" value="下棋">下棋
<br>
<input type="submit" value="完成">
<input type="reset" value="重置">
</form>
给选项添加上value,就可以让后台人员知道用户选了什么。(给后台传参)
属性
除了type属性外,<input>标签还有很多属性。
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
<label>表单元素
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心:<label>标签的for属性应与相关元素的id属性相同。
<select>表单元素
下拉列表。
<from>
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
<option>选项...</option>
</select>
</from>
<select>中至少包含一对<option>。
在<option>中定义selected="selected"时,当前项即为默认选中项。
<textarea>表单元素
文本域,用来输入文字的大框。
<form>
今日反馈:
<textarea>吧啦吧啦</textarea>
</form>
在<textarea>中添加文字即可显示在文本域中。