表单属性、键值对

 

设计原则：易维护 易扩展 易复用

表单：收集用户的输入 发送到后台
　　<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>     

 

转载于:https://www.cnblogs.com/wjglm/p/9301933.html