表单和H5

表单input

表单进阶-单选框

<input type="radio" name="aaa">非常满意

<input type="radio" name="bbb" id="man" checked="checked ">

<label for="man">男</label>

<input type="radio" name="bbb" id="woman">

<label for="woman">女</label>

• name用来实现单选或多选(分组)
• lable用来选择文字自动选择单选框
• checked 默认选项

表单进阶-复选框

<input type="checkbox" name="ccc">抽烟

<input type="checkbox" name="ccc">喝酒

<input type="checkbox" name="ccc">烫头

表单进阶-上传文件和隐藏字段

上传文件:<input type="file">

图片按钮-代替提交按钮(iuput type="submit"):<input type="image" src="Google.png"> 注：放在form内

隐藏字段：<input type="hidden" name="" id="" value="带给后端的个人信息">

禁用：禁用，只读 disabled,readonly
<button disabled="disabled">注册</button>
<input type="radio" disabled>不满意

表单进阶-下拉菜单

<select size="2" multiple>

    <option value="" selected>辽宁</option>

    <option value="">山东</option>

    <option value="">山东</option>

     <option value=""&gt>山西</option>

    <option value>河南</option>

<option value="" selected>河北</option>

</select>

select的支持属性

1. size,显示几个
2. multiple，

option的支持属性

1. value，提供给后端需要的value值
2. selected 默认选中

表单进阶-文本域

多行文本输入框-文本域: <textarea cols="" rows="" placeholder="请输入你的意见">提前设置好的value</textarea>
注：

• cols，rows受文本影响，建议用css
• 默认value：写在双标签内部，注意空格问题
• resize 重新设置大小，vertical(垂直方向可拖动)，horizontal（水平方向可拖动），both（两端都可拖动，默认值），none（两个方向都不可以拖动）

表单进阶-字段集

<fieldset>

 <legend>性别</legend>

  <input type="radio" name="aa">男

 <input type="radio" name="aa">女

</fieldset>

H5增强表单-input

滑块效果： <input type="range" name="range" min="100" max="1000" value="100" step="10">

• min和max用来设置区间 step步长 每次滑动值 value初始值
• min和max用来设置区间,注意初始值与步长是否成立

H5增强表单-数据列表

H5增强表单-属性

H5

H5基础与语法

H5新增语义化标签

H5新增音频,视频标签

音频 ：<audio src="" controls loop autoplay > </audio>

视频：<video src="" controls poster="" width="200px"> </video>

1. controls出现控制栏（必须存在，不然不会显示）

2. loop循环

3. autoplay自动播放 ，刷新或开启新页面失效

4. muted静音

5. video支持:poster 海报 ,支持width height