目录
一、表单的基本结构
1、几个基本标签
(1)form :表单
(2)input :输入框
(3)button :按钮
2、基本代码以及运行结果
(1)代码
<form action="https://www.baidu.com/s" target="_self" method="get" >
<input type="text" name="wd">
<button>百度搜索</button>
</form>
<br>
<form action="https://search.jd.com/search">
<input type="text" name="keyword">
<button>京东搜索</button>
</form>
(2)运行结果
二、常用的表单控件
1、文本输入框
(1)格式:<input type="text">
(2)常用属性
name :数据的名称
value :输入框的默认输入值
maxlength :输入框最大可输入长度
2、密码输入框
(1)格式:<input type="password">
(2)常用属性
name :数据的名称
value :输入框的默认输入值(一般不用)
maxlength :输入框最大可输入长度
3、单选框
(1)格式
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
(2)常用属性
name :数据的名称,若想出现单选效果,多个radio的name属性值要保持一致(必写)
value :提交的数据值(必写)
checked :默认选中的选项
4、复选框
(1)格式
<input type="checkbox" name="hobby" value="football">踢球
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="painting">画画
(2)常用属性
name :数据的名称(必写)
value :提交的数据值(必写)
checked :默认选中的选项
5、隐藏域
(1)格式
<input type="hidden" name="abc" value="123">
(2)含义
用户不可见的一个输入区域(作用:提交表单的时候,携带一些固定的数据)
(3)常用属性
name :指定数据的名称
value :指定的是真正提交的数据值
6、提交按钮
(1)格式
①<button>确认</button>(注意:button标签的默认type值为submit)
②<input type="submit" value="确认">
(2)注意事项
①button标签的type属性默认值为submit
②button不要指定name属性
③input标签编写的按钮,使用value属性指定按钮文字
7、重置按钮
(1)格式
①<button type="reset">重置</button>
②<input type="reset" value="重置">
(2)注意事项
①button不要指定name属性
②input标签编写的按钮,使用value属性指定按钮文字
8、普通按钮
(1)格式
<button type="button">普通按钮</button>
<input type="button" value="普通按钮">
(2)注意事项
普通按钮的type的值为button,若不写type值是submit,则会将表单提交
9、文本域
(1)格式
<textarea name="other" cols="20" rows="5"></textarea>
(2)常用属性
rows :指定默认显示的行数,会影响文本域的高度(初始值,但运行页面也可放大缩小,后期可通过css调整)
cols :指定默认显示的列数,会影响文本域的宽度(初始值,但运行页面也可放大缩小,后期可通过css调整)
(3)注意事项
不能编写type属性,其他属性与普通文本输入框一致
10、下拉框
(1)格式
<select name="grade">
<option value="one">1班</option>
<option value="two" selecteds>2班</option>
</select>
(2)常用属性
name :指定数据的名称
option :设置value属性,如果没有value属性,提交的数据是option中间的文字;如果设置了value属性,提交的数据就是value的值(建议设置value属性)
option标签设置了selected属性,表示默认选中
11、禁用表单控件
(1)格式
<input disabled type="text" name="acount" value="zhangsan" maxlength="10">
(2)使用场景
input、textarea、button、select、option等标签都可设置disabled属性
12、label标签
(1)作用
label标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点
(2)两种与label关联方式:
①让label标签的for属性的值等于表单控件的id
<label for="zhanghu">账户:</label>
<input id="zhanghu" type="text" name="acount" value="zhangsan" maxlength="10">
②把表单控件套在label标签的里面
<label>
密码:
<input type="password" name="pwd" value="123" maxlength="5">
</label>
13、fieldset与legend的使用(了解即可)
(1)作用
fieldset可以为表单空间分组,legend标签是分组的标题
(2)使用
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input id="zhanghu" type="text" name="acount" value="zhangsan" maxlength="10">
<br>
<label>
密码:
<input type="password" name="pwd" value="123" maxlength="5">
</label>
</fieldset>