表单标签上
目录
简介
- 什么是表单?
- 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签,表单域,表单按钮。
- 什么是表单元素?
- HTML中标签/标记/元素都是指HTML中的标签
- 表单元素其实就是HTML中的一些标签,在浏览器中所有的表单标签都有特殊的外观和默认的功能
格式
<form>
<表单元素></表单元素>
</form>
Input标签
<input>
标签,<input>
标签有一个type
属性,这个属性有很多类型的取值,取值的不同就决定了<input>
标签的功能和外观,所有的<input>
标签必须写在<form>
标签中
text
:明文输入框,value
属性设置默认值password
:暗文输入框,value
属性设置默认值radio
:单选框
- 默认情况下单选框不会互斥,需要设置name
属性,把同名的单选框添加到同名的分组当中去,在一个分组中的单选框互斥
- 要设置单选框默认选中,只需要设置
checked
属性为checked
- HTML中如果属性的名称和取值一样,可以只写一个属性名称,但是XHTML中必须填写完整
- 一个分组中如果设置了多个checked属性,则按照分组中最后一个设置的radio为准
- 要设置单选框默认选中,只需要设置
checkbox
:复选框
- 要设置多选框默认选中,只需要设置
checked
属性为checked
- 可以设置多个
checked
属性
- 可以设置多个
- 要设置多选框默认选中,只需要设置
button
:按钮,配合js完成一些操作img
:图片按钮,配合js完成一些操作reset
:重置按钮,不设置value
属性的话,有默认value
=“重置”,用于清空表单数据submit
:提交按钮,不设置value
属性的话,有默认value
=“提交”,用于提交表单数据
- 需要设置提交的目标服务器:通过
action
属性设置 - 需要提交哪些数据:form中的所有定义了
name
属性的表单元素
- 需要设置提交的目标服务器:通过
hidden
:隐藏域,不会显示在网页上,用于悄悄收集用户的数据email
:邮箱,添加正则表达式校验输入的邮箱格式是否正确url
:url链接,添加正则表达式校验输入的url格式是否正确,注意完整的url需要以http://或者https://开头number
:数字,添加正则表达式校验保证只能输入数字date
:时间,添加一个时间选择框color
:颜色,添加一个颜色选择框
<form action="">
<!--明文输入框-->
<input type="text" value="zhangsan"><br>
<!--暗文输入框-->
<input type="password" value="123456"><br>
<!--单选框-->
<input type="radio" name="sex" checked="checked">male<input type="radio" name="sex">female<input type="radio" name="sex">secret<br>
<!--复选框-->
<input type="checkbox">basketball<input type="checkbox">football<input type="checkbox">pingpong<br>
<!--按钮 -->
<input type="button" value="Click me"><br>
<!--图片按钮-->
<input type="image" src="1.png"><br>
<!--重置按钮-->
<input type="reset"><br>
<!--提交按钮-->
<input type="submit"><br>
<!--隐藏域-->
<input type="hidden">
<!--HTML5新增的属性-->
<!--邮箱-->
<input type="email"><br>
<!--url-->
<input type="url"><br>
<!--数字-->
<input type="number"><br>
<!--时间选择-->
<input type="date"><br>
<!--颜色选择-->
<input type="color"><br>
</form>
Label标签
- 默认情况下文字和输入框是没有关联关系的,也就是说点击文字,对应的输入框不会聚焦,如果想要让输入框获得焦点,就需要把文字和输入框绑定起来,这时候可以使用Label标签
- 首先给
<input>
标签设置一个id
,然后用<label>
标签包裹文字,然后设置<label>
标签的for
属性为对应输入框的id
,这是官方推荐的写法。
<label for="username">username:</label><input type="text" value="zhangsan" id="username"><br>
<label for="password">password:</label><input type="password" value="123456" id="password"><br>
- 你还可以这样做,直接用
<label>
标签报告你的<input>
标签,也能实现相同的结果,不需要设置id
属性,也不需要设置for
属性,这种方法仅仅适用于文字和<input>
标签一一对应的情况
<label>username:<input type="text" value="zhangsan"></label>