1,明文输入框
格式:账号:<input type="text" name="aa"></br>
2,暗文输入框
格式:<input type="password" name="bb"></br>
3,定义普通按钮
可以通过value属性来给按钮指定标题,它的作用是配合JS完成一些操作。
格式:input type="button" value="我是按钮"
4,图片按钮
用:配合JS完成一些操作
格式:<input type="image" src="images/register.jpg">
5,重置按钮
作用:用于清空表单中已经填写好的数据。
格式:<input type="reset" value=" ">
注意:如果想想改重置按钮默认的按钮标题可以通过value属性来修改
6,提交按钮
作用:将表单中已经填写好的数据,提交到远程服务器
格式:<form action="http://www.baidu.com">
注意:把表单中填写好的数据提交到远程服务器,必须具备两个条件:
1)需要给form表单添加一个action的属性,通过这个action属性指定需要提交到的服务器地址
2)需要给需要提交到服务器的表单元素添加一个name属性
7,隐藏域
作用 : 配合提交按钮将一些数据默默的悄悄(在用户不知道的情况下)的提交到服务器,一般是网站
用来进行某些用户调查的。
<input type="hidden" name="hx" value="wtf">
补充:1)fieldset标签:可以给表单添加一个边框 2)legend标签:可以给边框指定一个标题
3)单选框和多选框的name都需要指定相同的name值
其中,textarea标签是用来在页面中输入文本的;cols是文本的宽度;rows是文本的高度
可以自动校验输入的内容是否符合邮箱的格式:邮箱:<input type="email">
可以自动校验输入的内容是否是URL地址:域名:<input type="url">;
输入框中只能输入数字:<input type="number">;
通过日历来选择时间:<input type="date">;
通过取色板来选择颜色:<input type="color">。
8,label标签
默认情况下文字和输入框是没有关联关系的,也就是说点击文字输入框不会聚焦,如果想点击文字时让
对应的输入框聚焦,那么就需要让文字和输入框进行绑定。输入框和文字绑定在一起,那么我们可以使
用Label标签。
格式:1)将文字利用label标签包裹起来;2)给输入框添加一个id属性;3)在label标签中通过for
属性和输入框中的id进行绑定。
<label for="account">账号:</label><input type="text" id="account">
9,DATALIST标签
1)datalisst标签
它的作用是:给输入框绑定待选项。
2)格式
<datalist>
<option>待选内容</option>
</datalist>
3)给一个输入框绑定待选列表
(1)编写一个输入框;
(2)编写一个datalist标签;
(3)给datalist设置一个ID;
(4)给输入框添加一个list属性,将datalist的id的值赋给list属性。
例如:
10,select标签跟textarea标签
1)select标签
作用:用来定义下拉列表
格式:
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
例如:
注意:
(1)下拉列表不能输入内容, 但是可以直接在列表中选择内容;
(2)可以通过给option标签添加一个selected属性来指定列表的默认值;
(3)可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。
2)textarea标签
作用:定义一个多行输入框。
格式:<textarea>
</textarea>
注意:
(1)默认情况下输入框可以无限换行;
(2)默认情况下输入框有自己的宽度和高度;
(3)可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无
限往下输入;
(4)默认情况下输入框是可以手动拉伸的。要想输入框固定,就要使用CSS:
<style type="text/css">
textarea{
resize:none;
}
</style>
其中resize标签的调整大小的意思。