文章目录
1. form 标签(淘汰,一般用ajax数据交互)
<form action="" method=""></form>
(1)form 表单数据提交需要刷新整个网页,ajax局部刷新
(2)form是块元素
(3)method : 数据提交方式; action:提交地址
<input type="" name="" placeholder="">
type: 输入信息的类别
name: 数据名称,用于后台处理
placeholder: 提示信息
2. 文字输入
<form action="">
用户名: <input type="text" placeholder="请输入用户名">
</form>
3. 邮箱输入
邮箱地址需要满足邮箱格式
<form action="">
邮箱: <input type="email" placeholder="请输入邮箱地址">
</form>
4. 密码输入
<form action="">
密码: <input type="password" placeholder="请输入密码">
</form>
5. 数字输入
<form action="">
数字: <input type="number" placeholder="请输入数字" step=10 value=0>
</form>
(2)step: 步长;上下按钮调节
(3)max: 最大值
(4)min:最小值
(5)value:默认值
6. 滑块
<form action="">
<input type="range">
</form>
7. 日期和时间
<form action="">
<input type="date">
</form>
<form action="">
<input type="time">
</form>
8. 颜色输入
<form action="">
<input type="color">
</form>
9. 文件选择
<form action="">
<input type="file" multiple>
</form>
multiple属性可以添加多个文件
10. 按钮与提交
<form action="">
<input type="button" value='提交'>
<input type="submit" value='提交'>
</form>
当type为submit时,此时input元素显示为一个按钮, 按钮中的文字由元素标签内部value属性中的文字决定,点击此按钮就会向服务器提交整个表单的所有数据
11. 单选多选
(1)单选
<form action="">
<input type="radio" value='male' name='sex'> 男
<input type="radio" value='female' name='sex'> 女
</form>
name相同才能做到单选
(2)多选
<form action="">
<input type="checkbox"> python
<input type="checkbox"> java
<input type="checkbox"> shell
<input type="checkbox"> web
</form>
12. label元素(扩大按钮选择区域)
<form action="">
<input type="checkbox" id='python'> <label for="python">python</label>
<input type="checkbox" id='java'> <label for="java">java</label>
<input type="checkbox" id='shell'> <label for="shell">shell</label>
<input type="checkbox" id='web'> <label for="web">web</label>
</form>
label元素:扩大用户选中input元素的区域,for属性值对应input元素的id名
13. 下拉框
<form action="">
<select name="" id="">
<option value="">武汉</option>
<option value="">长沙</option>
<option value="" selected>广东</option>
<option value="">石家庄</option>
<option value="">深圳</option>
<option value="">上海</option>
</select>
</form>
说明:
(1)select元素:创造一个下拉选项列表,select中的name值表示这个下拉选项列表的名称
(2)option元素:创造一个下拉选项列表中的具体选项,option中的value值表示用户选择这个选项后,表单向服务器发送的数据
(3)selected:默认选择
14. 文本输入区域
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
15. 表单分组
<form action="">
<fieldset>
<legend>模拟单选按钮</legend>
<input type="radio"> 男
<input type="radio"> 女
</fieldset>
</form>
fieldset :表单分组
legend:标题
16. 图片
<input type="image" src="img/searchbt.gif" class='btn'>