[TOC] # 新增表单类型 #### email类型： • 输出内容必须为邮箱 示例： <input type="email" /> #### url类型： • 输出内容必须为url 示例： <input type="url" /> #### number类型： • 输入数值的文本框 示例： <input type="number" min="1" max="10" step="2"/> min:最小值 max:最大值 step:间隔 #### range类型： • 指定范围内的数字，表示形式为滑块 示例： <input type="range" name="range" min="1" max="11" step="2"/> min:最小值 max:最大值 step:间隔 # 日期类型表单 • date：日期文本框 • week：星期文本框 • time：时间文本框 • datetime-local：日期时间文本框 • search：搜索文本框 • tel：电话文本框 • color：颜色文本框 #### datelist标签 datalist： • 定义选项列表，用于输入自动匹配 示例： <form action="1.php" method= "post"> <input type= "text" name= "city" list= "citylist"> <datalist id= "citylist" > <option value="beijing">北京</option> <option value= "nanjing">南京</option> <option value= "guandong">广东</option> </datalist> </form> #### autofocus标签 autofocus： • 自动获取焦点 示例： <form action="1.php" method="post" > <input type="name" autofocus="on"> <input type="submit"> </form> #### form属性 form属性： • 提交form标签以外的表单 示例： <form id="form" action="1.php" method="post”> <input type="text" name="city"> <input type="submit"> </form> <input type="number" name="age" form="form"/> #### 多文件上传multiple属性 multiple属性： • 设置multiple后可以设置多个文件 示例： <form action="1.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="multiple"> <input type="submit"/> </form> 会自动调取手机拍照或图片库选项 #### 表单提示placeholder placeholder属性： • 设置文本框提示信息 示例： <form action="1.php" method="post"> <input type="text" name="title" placeholder="请输入标题"> <input type="submit"/> </form> #### 表单验证pattern属性 pattern属性： • 通过正则表达式验证表单 示例： <form action="1.php" method="post"> <input type="text" name="title" pattern="[1|0]" title="请输入1或0"> <input type="submit"/> </form> #### 表单验证required属性 表单验证required属性 • 表单内容不能为空 示例： <form id="form" action="1.php" method="post"> <input type="text" name="title" required title="标题不能为空"> <input type="submit"/> </form>