html表单和常用属性

表单

1、单选框

• 1、name属性，规定一组选项，着一组中只能选择一个，单选input类型是radio
• 2、label标签，是点击文字也可以选中，其中有个for属性，需要在input中设置id，然后在for属性中填写这个id

        <div>你的性别</div>
        <div>
            <input type="radio" name="bbb" id="man" checked>
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="bbb" id="woman">
            <label for="woman">女</label>
        </div>

• 3、checked属性，加上这个属性以后就是默认选中的意思，也就是单选中一组只能加一个，属性值等于checked时，值可以省略。
• 一个选项用一个div包裹。

2、复选框（多选）

• 1、复选框类型是checkbox
• 2、默认选择checked，可以加多个
• 3、label标签一样的

3、上传文件

• 1、上传文件的框input类型是file，可以将文件上传并且暂时保存。
• 2、提交按钮，用图片实现提交，可以用input类型为image的形势实现。

    <div>
        <div><h2>上传图片按钮-代替提交按钮</h2></div>
        <div>
            <input type="image" src="提交按钮图片路径">
        </div>
    </div>

• 3、提交要在form中实现，向后端提交信息。
• 4、隐藏的按钮：input类型为hidden，用的还是比较多的，不是给普通用户看的，而是给后端看的，存储用户信息，属性value存储的就是传递给后端的个人信息。

4、禁用、只读

• 1、禁用：可以对按钮或者input标签设置disabled属性，值为disabled，则按钮禁用
• 2、只读：readonly，可以聚焦，不能修改。

5、下拉菜单

• select标签：嵌套option标签，option是选项，select属性size，作用是规定下拉菜单中能够展示几个选项，放不开的撑开滚动条。
• 下拉菜单多选，加上multiple属性，可以用crtl加上鼠标进行多选
• option属性，value是提供给后端所需要的值。
• 默认选中，selected属性加到option标签上就行了，没有用multiple属性时不能用在多个选项身上。用了multiple属性可以规定多个选项有selected

6、文本域

文本域是一个多行文本输入框

• 1、cols：列，rows：行，一般不用，而且这两个变量只针对英文字符，汉字不适用。可以用css样式对文本框大小进行改变。
• 2、placehoder预置文本，提示文字。
• 3、textarea标签之间不能换行，避免将换行符设置能默认文本。
• 4、控制其不能扩大，在css中添加属性resize：vertical(垂直方向可以改变)（horizontal是水平方向可以改变，垂直不能改变，both是水平垂直都能改变，none都不能改变）。重新设置大小
• 5、和input的区别，input是单行文本输入框，textarea是多行文本的。

7、字段集

• 1、字段集是一个表单标签，用来包裹一个表单或者一个类型的选择，可以规定缺口，缺口内写入表单的内容。
• 2、具体形式

<h1>字段集</h1>
    <div>
        <fieldset>
            <legend>性别</legend>
            <input type="radio" name="a">男
            <input type="radio" name="a">女
        </fieldset>
    </div>

• 3、fieldset就是字段集的标签，legend是规定的缺口，后边的汉字是缺口内的文字，再下边是字段集中的内容。
• 4、改变框的颜色，可以叠用css样式，设置边框就行，所有的样式都可以使用。

8、h5新增内容

• 1、 新增语义化标签
  • 定义：看到标签就直到它是干啥的！！方便爬虫的辨识，h1,b等标签可以具有强调作用，方便辨识。
  • 各个部分的名称
    （1）头部header：页面的标题
    （2）内容区块section
    （3）artical与上下文无关的独立的内容
    （4）aside：在artical之外的补充内容
    （5）footer：页面中的一个内容区块或整个页面的脚注。
    （6）nav：表示页面中导航连接部分。
    （7）figure：独立的流内容，适用figcaption元素为其添加标题。
    （8）main：主要内容。
  • 实质：其实就是变了名字的div
  • 注意，在标签中适用calc函数时，运算符号左右必须加空格，不然会出现无效的问题。
  • artical是独立的一部分，它其中可以有自己的header和footer
• 2、音频和视频
  • flash不用了，开始用h5，在网页中可以放音视频
  • 音频标签为audio，几个属性，一个是src路径，一个是controls，值可以省略，是一个音频控制台，loop是循环播放，autoplay是自动播放属性（刷新一下就不行了，跟浏览器有关，有的刷新后也可以），muted属性：静音播放。
  • 视频标签video，controls控制台必须有，loop循环，autoplay自动播放（同音频），muted静音播放（静音播放可以支持自动播放）。poster视频封面，可以通过css设置宽高。
• 3、增强表单input
  • 主要是input的type属性
    • color：生成一个颜色选择器必须在form表单中适用才能向后端提交。加上一个submit按钮就能实现提交了
    • email：邮箱输入，在邮箱输入中输入的内容必须包含@符号。必须加上name值。
    • url地址：type=url，输入内容必须是个网址，https：//www.……
    • phone：电话号码，用于手机浏览器，自动选择数字键盘，在电脑端内有意义。
    • range：滑块效果，类似音量的选择滑块。name属性得有，min，max属性可以规定最大最小值，value可以设置初始值，step控制每次移动的值
    • number：只能输入数字。min，max属性规定最大最小值，step规定步长。name也是必须加的。
    • search：搜索框，可以通过点击×号快速清除。
    • date：日期选择器，month：精确到月份，week：精确到周次，datetime：精确到时分秒。通过那么传递后端。
• 3、选项列表
  • 搜索框中输入一个字后的提示信息

  <form>
      <input type="text" list="list">
      <datalist id="list">
          <option value="手机"></option>
          <option value="手表"></option>
          <option value="手环"></option>
          <option value="手镯"></option>
      </datalist>
  </form>
  

  • datalist就是提示列表，其中包含标签option表示选项，需要加一个id和输入框进行绑定，输入框中加list属性，值就是datalist的id值。支持模糊搜素。
• 4、常用属性
  • aotufocus：自动聚焦，打开网页自动聚焦到一个输入框。只能有一个焦点
  • required：数据不能为空，必填项！！可以用于多个数据上。
  • multiple：一次输入多个内容
  • pattern：规定输入的内容的形式，[0-9][A-Z]{3}表示必须是一个数字加三个字母的形式！规定格式是通过正则表达式验证实现