表单的新属性规范

  1. h5规范允许 当属性名和属性值相等的时候 可以直接书写属性名即可
  2. 在js中，h5允许以布尔值的形式控制属性开启或关闭
    也就是在js中 给autofocus属性设置值为true（真，打开） 或者是 false（假，关闭）
    但是在元素的属性中 不允许使用true或者是false来控制开启或关闭
  3. 如果多个表单书写autofocus(只能出现一次的属性)，那么以第一个书写的为准

表单的新属性

  • placeholder：
    占位符
  • autocomplete：
    是否提示用户曾经输入过的值 默认是on 关闭是off
  • autofocus：
    默认自动获取焦点
    他有唯一一个值是autofocus
  • required：
    必填项，当提交的时候，此表单必须填写
  • disabled：
    禁用任何表单元素，这个元素就被禁止输入或选择等等操作
使用disabled禁用表单，表单元素是不会在被提交了
  • checked：
    单选框或多选框 默认被选中
  • readonly：

对于可编辑的表单来说 表示不能再次被编辑 但是是可以被提交的

对单选多选按钮不支持
  • form： 
如果input存在form属性，表示当前的input属于某一个表单
          
          此时form表单的id的值 就是这个input的值
          
          那么form表单 和当前的input就进行关联了
          
          无论input书写在哪里，都能随着表单发送数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素的新属性</title>
</head>
<body>
<form action="###" method="get" id="form1">
    请输入用户名：
    <input type="text" name="user" placeholder="请输入用户名" autofocus autocomplete="off">
    <br>

    请输入密码：
    <input type="text" name="pass" value="123456" autofocus required>
    <br>

    请确认性别：
    男：<input type="radio" name="sex" value="男" disabled checked>
    女：<input type="radio" name="sex" value="女" disabled>
    <br>


    请确认年龄：
    大于30岁：<input type="radio" name="age" value="30-" checked readonly>
    小于30岁：<input type="radio" name="age" value="30+" readonly>

    请输入邮箱：
    <input type="email" name="email" value="lipeihua@atguigu.com" readonly>

    <br>
    <button>提交</button>
</form>

<!--在form表单外有一个input，但是想点击form中的提交按钮的时候，把这个input也给提交了，form属性就这样使用-->
<input type="hidden" name="id" form="form1" value="12587">
</body>
</html>Copy to clipboardErrorCopied

 

表单的新类型

  • input：（如果input的新类型不被浏览器所支持，那么他会默认显示成text文本框）
  • 大多数都被谷歌浏览器支持，如果开发移动端，只要谷歌支持即可，因为所有安卓系统内置浏览器都是chrome
  • type旧类型：
    text： 文本框
    password： 密码框
    radio： 单选框
    checkbox： 多选框
    hidden： 隐藏域
    file： 文件域
    button： 按钮
    reset： 重置按钮
    submit： 提交按钮
  • type新类型
  1. color：
    用来引入或者打开指定颜色的控件
  2. date：
    日期的控件（年月日）
  3. week：
    日期的控件（年周）（火狐不支持）
  4. month：
    日期的控件（年月）（火狐不支持）
  5. email：
    编辑email的字段
    自带验证，但是验证不完整，一般还是自己书写
    在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键
  6. number：
    用来输入数字的控件
    多了一个上下的按键，可以增加和降低数字大小
    验证必须是数字
    其他属性
  • min：最少数量
  • max：最大数量
  • value：当前数量
  • step：每次累加累减数量
  1. search：
    用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字
  2. tel：
    电话号码输入框
  3. url：
    url地址
  4. range：
    输入一个拖拽的控件
    属性：
  • max：最大值
  • min：最小值
  • step：每次走的最小单位
  • value：当前值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新type类型-input</title>
</head>
<body>
    <form action="###" method="get">
        请选择你喜欢的颜色：
        <input type="color" name="color">
        <br>

        请选择你的出生日期：
        <input type="date" name="brithday">
        <br>

        请输入当前的周数：
        <input type="week" name="week">
        <br>

        请输入你几月生日：
        <input type="month" name="month">
        <br>

        请输入您的邮箱地址：
        <input type="email" name="email">
        <br>

        请选择您购买的数量：
        <input type="number" name="num" min="2" max="10" step="2">
        <br>

        请在本框中进行检索：
        <input type="search" name="sear">
        <br>

        请输入您的电话号码：
        <input type="tel" name="tel">
        <br>

        请输入你的个人博客的网址：
        <input type="url" name="url">
        <br>

        请选择：
        <input type="range" name="range" min="30" max="100" value="50">
        <br>
        <br>
        <button>提交</button>
    </form>

</body>
</html>Copy to clipboardErrorCopied

 

select元素的新属性

  • selected： 默认选中项
  • multiple： 让select可以进行多选（按住ctrl键进行多选）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select元素的属性</title>
</head>
<body>
<form action="###" method="get">
    请选择你喜欢的食物：
    <select name="food" id="" multiple>
        <option value="肉">肉</option>
        <option value="鸡蛋">鸡蛋</option>
        <option value="水果" selected>水果</option>
        <option value="骨头">骨头</option>
    </select>
    <button>提交</button>
</form>
</body>
</html>Copy to clipboardErrorCopied

 

调用相册和摄像头

  • input的file补充：
    <input type="file" accept="image/*" capture="camera">`
    文件域 的 accept属性书写 image/* 代表接受任何格式的图片
    capture=camera 代表从相机拍照接收
    capture=photo 代表从相册选取照片
    但是在pc端的表现都是选取文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用本地相册和相机</title>
</head>
<body>

    <input type="file" accept="image/*" capture="camera">

    <input type="file" accept="image/*" capture="photo">
</body>
</html>