3_H5增强表单

2016-11-30 本文已影响188人 Zd_silent

H5增强的表单

form元素及属性

form元素

用来定义一个表单，是建立表单的基础元素，（就类似定义表格的table）
表单的其他元素包含在form元素中，其主要子元素有：input/button/select......

form元素的属性

action：指定表单的发送地址（服务器地址）
method:表单数据发送至服务器的方法，常用的有两种：get/post

get和post提交的区别

get方法提交，数据会附在网址之后主动提交给服务器
post方法提交，数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

input元素及其属性

input元素

用来设置表单中的内容项，比如输入内容的文本框，按钮等
不仅可以布置在表单中，也可以在表单之外的元素使用

input元素的属性

1.  `type属性`：指定输入内容的类型，默认为text:单行文本框

        默认为text 
        password：密码状态输入
        submit:提交按钮，点击将数据发送至服务器
        reset:重置按钮
        button:普通按钮
        imge：图片式提交按钮
        hidden；隐藏字段
            该内容不会显示页面上
            一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器
            关于hidden暂时只了解这么多，以后用到的时候再详细说
        email:表示要输入一个电子邮箱
        url:表示要输入一个网址
        tel:表示输入的内容是一个电话号码(不验证，键盘是数字)
            这是HTML5新增的
            他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作
            浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异
        number:
            这是HTML5新增的
            可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值
            浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异
        range(活动条)
            这是HTML5新增的；与number类型类似，也是表示一定范围的数值输入，但是以一个活动条的状态显示
            可以配合input的max/min/step/value规定的最大值/最小值/步长/默认值
            浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异
        时间类
            这是HTML5新增的；
            包括datetime/datetime-local/date/month/week/time
            浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同
        color
            这是HTML5新增的；
            可以建立一个颜色的选择输入框
            浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同
        seacrch
            这是HTML5新增的；
            用于建立一个搜索框，用来供用户输入搜素的关键词
            浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同
        file
            用来创建一个文件选取的输入框
            可通过accept属性规定选取文件的类型，比如图片/视频
            multipe属性可以设定一次允许选择多个文件
        autofocus属性：自动获得焦点
        accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点
        tabindex属性：指定按Tab键时，项目间的移动顺序
        autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能,默认开启on

name属性:输入内容的识别名称，传递参数时候的参数名称
value属性:默认值
maxlength:输入的最大字数
readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器
disabled属性：设置为不可用（不可操作）
placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email//password/search有效
autocomplet属性：属性值为on/off,定义是否开启浏览器自动记忆功能
autofocus属性：自动获得焦点
checkbox/复选框

用来创建一个复选框（可以多项选择）

通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取
radio/单选框

用来创建一个单选框（可以多项选择）

通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取

必须将同一组单选项设置一个相同的name属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://www.hao360.cn/" method="get"><br>
        <input type="hidden" value="测试" name="ceshi"><br>
        用户名：<input type="text" name="user" name="user" value="请输入用户名" maxlength="11" autocomplet="off"><br>
         密码： <input type="password" name="ps" name="password"><br>
        地址：<input type="text" readonly="readonly" name="address" value="xx街道"><br>
        提示：<input type="text" disabled="disabled" value="提示"><br>
        邮箱：<input type="email" name="email" required><br>
        网址：<input type="url" name="url" accesskey="n"><br>
        电话；<input typ="tel" name="tel"><br> 
        数量：<input type="number" value="2" min="2" max="6" step="2" name="num">
        进度：<input type="range" min="0" max="100" value="10"name="rang">
        时间：<input type="time"><br>
        日期：<input type="date"><br>
        周：<input type="week"><br>
        月：<input type="month"><br>
        本地时间：<input type="datetime-local"><br>
        UTC时间：<input type="datetime"><br>
        颜色选择：<input type="color" name="color"><br>
        搜索框：<input type="search" placeholder="提示内容" autofocus ><br>
        文件：<input type="file" accept="image/png" multiple="multiple">
        <h3> 复选框 </h3>
        <input type="checkbox" name="dx" value="1">aa
        <input type="checkbox" name="dx" value="2" checked="checked">bb
        <input type="checkbox" name="dx" value="3">cc
        <input type="checkbox" name="dx" value="4">dd
        <hr>
        <h3> 单选框 </h3>
        <input type="radio" name="rd" value="1">aa<br>
        <input type="radio" name="rd" value="2" checked="checked">bb<br>
        <input type="radio" name="rd" value="3">cc<br>
        <input type="submit" value="确定">
        <input type="reset" value="清除">
        <input type="button" value="普通按钮">
        <input type="image" src="sc.png"> 
    </form>
</body>
</html>

input.png

select元素

用来建立一个下拉菜单选项列表
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立
option元素可以用来建立一个选项，即下拉列表的一个菜单项
optgroup元素用来对option元素进行组合分组
size用来定义列表中显示的列表项
multiple属性用来定义是否可以多选
可以添加disabled属性和autofocus属性

datalist元素

HTML5新增元素，用来建立一个选项列表
datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项
通常与input元素配合使用(不太方便动态改变，)

HTML5新增表单属性

form属性:将表单外的内容与表单进行关联

novalidate属性：设置数据提交时不进行验证

enctype属性：仅作了解规定在发送到服务器之前应该如何对表单数据进行编码。通常情况下我们使用默认值即可

accept-charset属性：仅作了解accept-charset 属性规定服务器处理表单数据所接受的字符集。 accept-charset 属性允许您指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据。通常情况下我们使用默认值即可此属性的默认值是 "unknown"，表示表单的字符集与包含表单的文档的字符集相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <form action="" id="xz">
        <select name="selelct" multiple="multiple">
            <optgroup>
                <option value="1">选我</option>
                <option value="2">选她</option>
                <option value="3">不选</option>
            </optgroup>
            <optgroup >
                <option value="1">选我</option>
                <option value="2">选她</option>
                <option value="3">不选</option>
            </optgroup>
        </select>
        <input type="submit">
    </form>
    <hr>
    <form>
        <input type="text" name="text" list="mydatalist">
        <datalist id="mydatalist">
            <option value="选我"></option>
            <option value="选她"></option>
            <option value="不选"></option>
        </datalist>
        <input type="submit">
    </form> 
    <form novalidate="novalidate">
        用户名：<input type="text" name="user" form="xz">
        邮箱：<input type="email" name="email">
        <input type="submit">
    </form>
</body>
</html>

select_datalist.png

lable元素

用来为 input 元素定义标注（标记）,建立一个与之相关联的标签
for属性，让标签与指定的input元素建立关联
将input元素包含在label标签中
可以通过accesskey建立快捷键

lable属性

在option元素中可以设定比标签内容更优先的选项
optgroup的分组名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="2" align="center" style="background:yellow;padding=10px">
        <tr>
            <td>
                <h3>你喜欢谁？</h3>
                <input type="checkbox" name="ck" value="我" id="a">
                <label for="a">我</label>
                <input type="checkbox" name="ck" value="你" id="b"><label for="b">你</label>
                <label><input type="checkbox" name="ck" value="他" id="c">他</label>
                <label>
                    <input type="checkbox" name="ck" value="木木" id="d">木木
                </label>
                <label>
                    <input type="checkbox" name="ck" value="屎蛋" id="e">屎蛋
                </label>
                <hr>
                <h3>你的性别？</h3>
                <input type="radio" name="rd" value="男" id="1">
                <label for="1">
                    男
                </label><br>
                <label>
                    <input type="radio" name="rd" value="女" id="2">女<br>
                </label>
                <label>
                    <input type="radio" name="rd" value="不告诉你" id="3">不告诉你<br>
                </label>
                
            </td>
            <td>
                <h3>你喜欢谁？</h3>
                <input type="checkbox" name="ck" value="我" id="a">我
                <input type="checkbox" name="ck" value="你" id="b">你
                <input type="checkbox" name="ck" value="他" id="c">他
                <input type="checkbox" name="ck" value="木木" id="d">木木
                <input type="checkbox" name="ck" value="屎蛋" id="e">屎蛋
                <hr>
                <h3>你的性别？</h3>
                <input type="radio" name="rd" value="男" id="1">男<br>
                <input type="radio" name="rd" value="女" id="2">女<br>
                <input type="radio" name="rd" value="不告诉你" id="3">不告诉你<br>
            </td>
        </tr>
    </table>

    <hr>
    <form action="">
        <h3>查看相关</h3>
        <input type="submit" value="搜索">
        <select>
            <optgroup label="人">
                <option value="你好">你好</option>
                <option value="我好">我好</option>
            </optgroup>
            <optgroup label="动物">
                <option value="猪好" label="动">猪好</option>
                <option value="狗好">狗好</option>
            </optgroup>
        </select>
    </form>
    
</body>
</html>

label.gif

textarea元素

用来建立多行输入文本框
元素标签中的内容将一文本框默认值的形式呈现
不仅可以用在表单中，也可以在其他块元素或内联元素中

textarea元素的属性：

name/disabled/readonly/form/reauired/autofocus/placeholder属性
rows属性：设置多行文本的行数（高度）
cols属性：设置多行文本的每行显示的字数（宽度）

button元素

用来建立一个按钮从功能上来说，与input元素建立的按钮相同
button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
不仅可以在表单中使用，还可以在其他块元素和内联元素中使用

button元素的属性

type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
name/vlue/disable属性：与input的用法相同
autofocus属性：设置按钮自动获得焦点。
form属性：设定按钮隶属于哪一个或多个表单
formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
formnovalidate属性：设定表单将会覆盖原本的novalidate属性
fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定
formtarget属性：将覆盖原本的target属性设定
重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" id="myform">
        用户名：<input type="text" size="30" name="user"><br><br>
        意见：<textarea rows="5" cols="30" placeholder="请输入您的意见" name="yj"></textarea><br>
        <button type="submit" style="background:red;border-radius:10px"><img src="sc.png" width="12" >提交</button>
        <button type="reset">重置</button>
        <input type="submit" value="提交到地址1" formaction="http://www.baidu.com">
        <input type="reset">
    </form>
</body>
</html>

output元素：数据的输出

output元素是HTML5新增的元素，用来设置不同数据的输出
output元素的输出内容是由代码控制的

output元素的属性：

name属性：定义对象的唯一名称。（表单提交时使用）
form属性：定义所属的一个或多个表单。
for属性：定义输出域相关的一个或多个元素。

oninput表单事件：当用户对元素数据的输入时触发

parseInt() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" id="myform" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
    <input type="number" id="num1" />
    +
    <input type="number" id="num2" />
    =
    <output name="num" for="num1 num2">

    </output>
  </form>
</body>
</html>

output.gif

progress元素

是HTML5中新增的元素，用来建立一个进度条
通常与JavaScript 一同使用，来显示任务的进度。
使用时注意浏览器的支持情况：Internet Explorer 9 以及更早的版本不支持

progress元素的属性：

max属性：规定当前进度的最大值。
value属性设定进度条当前默认显示值
form属性：规定进度条所属的一个或多个表单。

meter元素

是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的评定
通常与JavaScript 一同使用，来显示任务的进度。

meter元素的属性：

value属性设定进度条当前默认显示值
max属性：规定范围的最大值，默认值为1.
min属性：规定范围的最小值，默认值为0.
low属性：规定被视作低的标准。
high属性：规定被视作高标准。
form属性：规定所属的一个或多个表单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="" id="myform">
    <progress max="10" value="3"></progress><br />
    <meter max="100" min="0"  value="60" high="80" low="30"></meter>
  </form>
</body>
</html>

progress.png

fieldset元素：可将表单内的相关元素分组。

当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，通常会有一个边框。
没有必需的或唯一的属性。form/disabled属性可用。

legend元素：为 fieldset 元素定义标题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>
        用户注册
      </legend>
      账号：<input type="text" name="user" /><br>
      密码：<input type="password" name="password" /><br>
      <input type="submit" />
    </fieldset>
  </form>
</body>
</html>

fieldset.png

keygen元素

是HTML5中新增的元素，用来建立一个密钥生成器
当提交表单时，私钥存储在本地，公钥发送到服务器。主要作用是提供一种用户验证身份的方法
使用时注意不同浏览器支持程度不同；目前Internet Explorer 和 Safari暂不支持

keygen元素元素的属性：

name/form/autofocus/disabled
challenge属性:将 keygen 的值设置为在提交时询问。
keytype属性：定义密钥类型，如设置为rsa（一种密码的算法），则生成 RSA 密钥。

<body>
  <form action="" id="myform">
    账号：<input type="text" name="account" />
    加密：<keygen name="mykey">
    <input type="submit" />
  </form>
</body>

keygen.png

pattern属性

设定输入类型的正则表达式

details元素

用于描述文档或文档某个部分的细节。
通常与summary元素配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details中的内容。

details元素的属性：

open属性：规定在 HTML 页面上 details 是可见的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <details open="open">
    <summary>
      点击率
    </summary>
    <p>
      该文章目前的点击率：6000
    </p>
    <ul>
      <li>
        8000以上：很火<meter max="10000" min="0" low="3000" high="8000" optimum="" value="9000"></meter>
      </li>
      <li>
        3000-8000以上：一般<meter max="10000" min="0" low="3000" high="8000" optimum="" value="4000"></meter>
      </li>
      <li>
        3000以下：人气不高啊<meter max="10000" min="0" low="3000" high="8000" optimum="" value="1000"></meter>
      </li>
    </ul>
  </details>
</body>
</html>

details.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    form{background: pink;width: 400px;padding: 10px;margin-top: 150px;margin-left: 200px;}
    button{background: #7370d8; padding: 5px;border-radius: 5px}
    button:hover{padding: 7px;background: #2f4f4f;border-radius: 5px}
    input{padding: 5px;background: #f8f8f8}
    input:focus{background: #ffc0cb;padding: 5px}
  </style>
</head>
<body>
  <form action="">
    <fieldset>
      <legend>
        注册用户
      </legend>
      <p>
        <label for="user">
          账号：
          </label>
        <input type="text" name="user" id="user" placeholder="账号" required="required" />
      </p>
      <p>
        <label>
          密码：<input type="password" name="password" id="password" placeholder="密码" required="" />
        </label>
      </p>
      <p>
        <label>
          电话号码：<input type="tel" name="phone" id="phone" placeholder="电话号码" required="" />
        </label>
      </p>
      <p>
        <label>
          电子邮箱：<input type="email" name="email" id="email" placeholder="电子邮箱" required="" />
        </label>
      </p>
      <button>注册</button>
    </fieldset>
  </form>
</body>
</html>

end.gif