html表单from练习

作用

专门用来收集用户信息的

input标签

• type属性
  text
  明文输入框
  password
  暗文输入框
  radio
  单选框
  注意单选框默认不会互斥的,如果需要互斥,则需要互斥的所有单选框都添加name属性,而且必须一样
  如果需要默认选中一个单选框,则需要给这个单选框添加一个checked属性值也为checked,如果属性和值是一样的在html里面可以省略一个不写,但是在xhtml里面必须都写上
  checkbox
  多选框
  注意多选框的默认值可以有多个,单选框的默认值只能有一个,如果设置了多个,只有最后一个才会生效
  button
  按钮
  按钮的value属性是按钮上显示的文本
  image
  是用图片来定义按钮的
  reset
  定义重置按钮,作用是来清空表单的数据,有个默认显示值是重置,可以更改
  submit
  定义提交按钮的 默认显示的值是提交,可以更改
  作用是把表单的数据提交到远程的服务器,具体提交到那个服务器是通过from的action属性来确定的,提交的是有name属性的表单,并且是一key value的形式提交的
  hidden
  隐藏域
  用于不会让用户知道的方式提交数据,所以不会在网页上显示出来
• value属性
  默认值

label标签

用来将文字和输入框绑定,用法是给输入框设置一个id,再在label标签的for属性传进去

<label for="1">
			账号
		</label>
		<input type="text" id="1">
		<label for="2">
			密码
		</label>
		<input type="password" id="2">

还有一种写法

		<label>
			账号
		<input type="text">
		</label>
		<label>
			密码
		<input type="password">
		</label>

但是这种写法有一定的局限性不太灵活

• datalisht标签
  作用:是提供一个待选框
  首先要有一个输入框
  再有一个待选框
  待选框里每个元素都在option标签里
  然后给待选框一个id属性
  再给输入框一个list属性,把id的值传进去

		<label>
			账号
		<input type="text" list="hehe">
		</label>
		<datalist id="hehe">
			<option >在么?</option>
			<option >吃了吗?</option>
			<option >呵呵</option>	
		</datalist>

但是现在很多浏览器都不支持

h5里面的input类型

• email
  作用是会自动校验输入的是否是邮箱
• url
  自动校验输入的是不是网址
• number
  自动校验输入的是不是数字
• time
  可以通过日历来选择时间
• color
  可以通过取色版来选择颜色

select

用来定义下拉列表
里面的数据也是放到option标签的
注意点:下拉列表不可以输入值,但是可以在列表.里选择值
可以通过给option标签添加select属性来指定默认值,select属性的值是select
可以通过给option标签外层包裹一个optgroup标签来分类

textarea

定义一个多行的文本输入框
注意点:默认情况下输入框可以无限换行,输入框有自己的高度和宽度
通过 col 属性 row 属性来指定输入框的宽度和高度,但是还是可以无限输入
默认情况下输入框可以随便拉伸

提交表单

第一from的属性要有一个值
第二提交的数据要有name属性
注意,单选框和多选框的name属性必须一样
除了button都可以通过value属性来指定提交的值