设计原则:易维护 易扩展 易复用
表单:收集用户的输入 发送到后台
<form action="后台地址" method="提交方式" 提交方式:get(默认) post enctype="multipart/form-data" >
表单元素
</form>
1、通用格式: 键值对的 键为name的值,值为value的内容
(路径?键值对&键值对 : 路径?uid=123&pwd=456)
例:
<form action="#" method="get">
<input type="text " name="uid" value="123">
<input type="password" name="pwd" value="456">
<input type="submit" value="提交">
</form>
(路径?键值对&键值对 :路径?aihao=1&aihao=2&aihao=3)
例:
<form action="#" method="get">
<input type="checkbox" name="aihao" value="1">英雄联盟
<input type="checkbox" name="aihao" value="2">cf
<input type="checkbox" name="aihao" value="3">吃鸡
<button>提交</button>
</form>
2、下拉格式: 只有下拉是: 键值对里面的键是select的name属性值,值是option里面value的值,没有value用内容当值
(路径?键值对&键值对 : 路径?uid=1 或者 路径?uid=2 或者 路径?uid=小巧)
例:
<form action="#" method="get">
<select name="uid" >
<option value="1">瘦子</option>
<option value="2">苗条</option>
<option >小巧</option>
</select>
<button>提交</button>
</form>
3、多行文本格式:键值对:键为name的值,值为内容
(路径?键值对&键值对 : 路径?wenbenyu=123456)
例:
<form action="#" method="get">
<textarea name="wenbenyu" id="" cols="30" rows="10">123456</textarea>
<button>提交 </button>
</form>
4、属性:
(1)表单元素:name value 通用属性
文本框: text: name value readonly 只读 disabled 不可操作 placeholder="提示文本"
密码框: password:name value
隐藏域: hidden: name value
多行文本:textarea :name value
(2)选择域: disabled 不可操作(通用属性) checked (radio,checkbox) 默认选中 selected(option) 默认选中
单选: radio: disabled 不可操作 checked (radio,checkbox) 默认选中
多选:textcheck:disabled 不可操作 checked (radio,checkbox) 默认选中
下拉: select option:disabled 不可操作 selected(option) 默认选中 multiple 把所有的属性全显示出来 size="2" 允许多选(显示几个)
(3)按钮: disabled 不可操作(通用属性)
补充按钮:button:disabled 不可操作
提交按钮:submit(只在表单内有用):disabled 不可操作
重置:reset(只在表单内有用): disabled 不可操作
button标签 :在form表单里面和 submit 效果一样
其他:文件file 需要属性 enctype="multipart/form-data" 文件上传支持 ,
图片img,日期date,颜色color
(4)音频文件 <audio src=""></audio>
(5)视频文件 <video src="" autoplay(自动播放) controls(控件) width="50%" loop(循环)></video>