A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 学习交流 › 技术交流 › 前端与移动开发技术交流 › 正文

[学习交流] 【上海校区】HTML的5表单新增的属性

© 梦缠绕的时候 黑马粉丝团   /  2018-8-8 09:35  /  1291 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1、

  • placeholder 占位符
  • autofocus 获取焦点
  • multiple 文件上传多选或多个邮箱地址
  • autocomplete 自动完成，用于表单元素，也可用于表单自身
  • form 指定表单项属于哪个form，处理复杂表单时会需要
  • novalidate 关闭验证，可用于<form>标签
  • required 验证条件，必填项
  • pattern 正则表达式 验证表单

2、在这里都有表单的熟用的属性



  • <!DOCTYPE html>



  • <html lang="en">



  • <head>



  •     <meta charset="UTF-8">



  •     <title>Title</title>



  • </head>



  • <body>



  • <form action="" id="myForm">



  •     <!--placeholder：提示文本，提示占位-->



  •     <!--autofocus:自动获取焦点-->



  •     <!--autocomplete:自动完成：on:打开  off:关闭



  •     1.必须成功提交过:提交过才会记录



  •     2.当前添加autocomplete的元素必须有name属性-->



  •     用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>



  •     <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->



  •     <!--required:必须输入，如果没有输入则会阻止当前数据提交-->



  •     <!--pattern:正则表达式验证



  •     *:代表任意个



  •     ?:代表0个或1个



  •     +：代表1个或多个-->



  •     手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>



  •     <!--multiple：可以选择多个文件-->



  •     文件：<input type="file" name="photo" multiple> <br>



  •     <!--email:有默认验证  在email中，multiple允许输入多个邮箱地址，以逗号分隔-->



  •     邮箱：<input type="email" name="email" multiple><br>







  •     <!--提交：-->



  •     <input type="submit"> <br>



  • </form>



  • <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->



  • <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->



  • 地址：<input type="text" name="address" form="myForm">



  • </body>



  • </html>




  • autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>



  • <form action="" autocomplete="on">



  •     autofocus定位文本框焦点：<input type="text" autofocus> <br>



  •     placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br>



  •     email邮件类型自带验证和提示：<input type="email"> <br>



  •     required属性设置非空特性：<input type="tel" required><br>



  •     pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>



  •     multiple多文件选择：<input type="file" multiple><br>



  •     <input type="submit" value="提交"/>



  • </form>



新增的表单元素-datalist


  • <!DOCTYPE html>



  • <html lang="en">



  • <head>



  •     <meta charset="UTF-8">



  •     <title>Title</title>



  • </head>



  • <body>



  • <form action="">



  •     <!--专业：



  •     <select name="" id="">



  •         <option value="1">前端与移动开发</option>



  •         <option value="2">java</option>



  •         <option value="3">javascript</option>



  •         <option value="4">c++</option>



  •     </select>-->



  •     <!--不仅可以选择，还应该可以输入-->



  •     <!--建立输入框与datalist的关联  list="datalist的id号"-->



  •     专业：<input type="text" list="subjects"> <br>



  •     <!--通过datalist创建选择列表







  • 这里要注意浏览器的使用，因为火狐浏览器效果显示不出来-->



  •     <datalist id="subjects">



  •         <!--创建选项值：value:具体的值 label:提示信息，辅助值-->



  •         <!--option可以是单标签也可以是双标签-->



  •         <option value="英语" label="不会"/>



  •         <option value="前端与移动开发" label="前景非常好"></option>



  •         <option value="java" label="使用人数多"></option>



  •         <option value="javascript" label="做特效"></option>



  •         <option value="c" label="不知道"></option>



  •     </datalist>







  •     网址：<input type="url" list="urls">



  •     <datalist id="urls">



  •         <!--如果input输入框的type类型是url,那么value值必须添加http://-->



  •         <option value="http://www.baidu.com" label="百度"></option>



  •         <option value="http://www.sohu.com"></option>



  •         <option value="http://www.163.com"></option>



  •     </datalist>



  • </form>



  • </body>



  • </html>




表单的新的两个属性



  • <!DOCTYPE html>



  • <html lang="en">



  • <head>



  •     <meta charset="UTF-8">



  •     <title>Title</title>



  • </head>



  • <body>



  • <form action="">



  •     用户名：<input type="text" name="userName"><br>



  •     密码：<input type="password" name="userPwd"> <br>



  •     加密：<keygen></keygen><br>



  •     <input type="submit">



  • </form>







  • <!--显示输出信息：只能显示不能修改



  • 1.语义性更强



  • 2.值需要你去设置，不能自动计算-->



  • <output>总金额：￥100.00</output>



  • </body>



  • </html>







1 个回复

倒序浏览
不二晨 金牌黑马 2018-8-16 17:21:51
| 只看该作者
沙发
奈斯
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马