读书笔记：HTML秘籍Web表单

//一个html5的表单

<!DOCTYPE html>
<html>

<body>
  <header>
   <hgroup>
    <h2>Zoo Keeper Application From</h2>
    <h4> please complete the from </h4>
   </hgroup>
  </header>
  <div>
   <fieldset>
    <legend>Contact Details </legend>
    <table>
     <tr>
      <td>
       <label>Name<em>* </em></label>
      </td>
      <td>
       <input id="name" type="text">
      </td>
     </tr>
     <tr>
      <td>
       <label> Telephone</label>
      </td>
      <td>
       <input id="telephone" type="text">
      </td>
     </tr>
     <tr>
      <td>
       <label>Email</label>
      </td>
      <td>
       <input id="email" type="text" />
      </td>
     </tr>

     <tr>
      <td>
       <label>habby</label>
      </td>
      <td>
       <input id="habby" type="checkbox" name="habby" />足球
       <input id="habby" type="checkbox" name="habby" />篮球
      </td>
     </tr>

     <tr>
      <td>
       <label>sex</label>
      </td>
      <td>
       <input id="sex" type="radio" name="sex" />男
       <input id="sex" type="radio" name="sex" />女
      </td>
     </tr>
     <tr>
      <td>
       <label>home</label>
      </td>
      <td>
       <select>
        <option>云南</option>
        <option>黑龙江</option>
       </select>
      </td>
     </tr>
     <tr>
      <td>
       <label>other</label>
      </td>
      <td>

     </tr>
     <tr>
      <td>
       <input type="button" value="按钮">
      </td>
      <td>
       <input type="submit" />
       <input type="reset" />
       <input type="image" src="../img/image.png">

      </td>
     </tr>
    </table>
   </fieldset>
  </div>
  <footer>
  </footer>

</body>

</html>

扫描二维码关注公众号，回复： 3956266 查看本文章

1.表单<input>中的placeholder=“文本框正确的输入内容”属性---用来提示;title属性当用户点击当前文本框时提示输入内容
2.在文本框获取焦点时改变样式
<style type="text/css">
input:focus{
background: palegoldenrod;
}
</style>
3.html验证原理
表单的<input>的required属性=表示该字段不能为空
4.关闭验证--<form novalidate>

焦点：挑选正确的起点--autofocus属性，只能给一个<input>或<textarea>标签添加该属性；
验证样式伪类：
required(必填)，optional(选填)
valid(有效)，invalid(无效)
in-range(在范围内)，out-of-range(超出范围)
eg: input:required:invalid{
background-color:lightyellow;
}
正则表达式：匹配文本
常用于搜索（在长文档中查找匹配的文本）和验证（验证某个值匹配模式）
html5可以通过pattern应用到<input>或者<textarea>中
eg:
<input type="text" id="id" pattern="[a-z]{3}-[0-9]{3}" autofocus required />
js库：https://github.com/westonruter/webform2
下的download表单验证
http://www.useragentman.com/tests/html5Widgets
滑动条，数据选择器，颜色选择器

导入<head><script src="webform2.js"></script></head>
新的输入控件
<input type="email/url/search/tel/number/range/datetime/date/month/color">
number数值：有min和max属性，可以限制只输入数值
<input id="number" type="number" min="0" max="100" step="0.5">
网址url：必须是xxx://，且XX必须是字母；
email（电子邮箱）：必须包含一个@和一个.
tel(电话号码)：不接受字母
range(滑动条)：数值型控件，不会显示值，可以使用js来处理；
<input id="weight" type="range" min="50" max="1000" value="160" step="5" >
datetime(日期)：
<input type="date" >
<input type="time" >
<input type="month" >
<input type="week" >
color(颜色):
<input type="color" >
显示输入建议--datalist,显示一个下拉建议表，既可以输入又可以选择；
eg:
<legend id="zz">dddd</legend>
    <input id= "www" list="a">
    <datalist id="a">
       <option label="zz" value="zz">
        <option label="ww" value="ww">
     </datalist>
注：所有控件为空都会验证成功，如果为必填项目，加上required属性；
<progress></process>进度条标签；js代码来获取和修改；
eg: a:不确定进度条
<progress >滚动条不断滚动
   </progress>

<progress value="12" min="1" max="100">25%
</progress>
<meter></meter>计量条;low和high属性表示过高或者过低；
eg:
<meter min="0" max="100" low="10" high="60" value="30" >30px
</meter>

contentEditable标记内容编辑元素
sesignMode编辑页面和iframe标签一起使用；

读书笔记：HTML秘籍Web表单

猜你喜欢