中级Web教程:HTML5表单元素

开课吧开课吧锤锤2021-04-08 11:50

点赞
有用
分享分享

    网络前端高薪的诱惑,学习门槛低,不管是学生党还是工作者,都渴望凭借自己的能力,空闲的时间,去学前端。也许是一种爱好,也许是一种想从事的工作。但它真的那么简单吗?现在,初级前端的工作,已接近饱和,并处于供过于求的状态,企业更需要的是具备扎实的基础,至少具备后端技能的前端开发工程师。已不像之前所说的美工,美工了。在许多大企业中,前端开发岗位是独立的,需要专业技能。

    HTML5表单元素

    HTML5新的表单元素

    HTML5有以下新的表单元素:

    <datalist>

    <keygen>

    <output>

    注意:不是所有的浏览器都支持HTML5新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。

    HTML5<datalist>元素

    <datalist>元素规定输入域的选项列表。

    <datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

    使用<input>元素的列表属性与<datalist>元素绑定.

web

    <input>元素使用<datalist>预定义值:

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

    HTML5<keygen>元素

    <keygen>元素的作用是提供一种验证用户的可靠方法。

    <keygen>标签规定用于表单的密钥对生成器字段。

    当提交表单时,会生成两个键,一个是私钥,一个公钥。

    私钥(privatekey)存储于客户端,公钥(publickey)则被发送到服务器。公钥可用于之后验证用户的客户端证书(clientcertificate)。

web

    带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

    HTML5<output>元素

    <output>元素用于不同类型的输出,比如计算或脚本输出:

web

    将计算结果显示在<output>元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

    HTML5新表单元素

    HTML<datalist>标签

    下面是一个<input>元素,<datalist>中描述了其可能的值:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

    HTML<keygen>标签

    该标签在新的Web标准中已废弃。

    带有keygen字段的表单:

<form action="demo_keygen.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

    HTML<output>标签

    将计算结果显示在<output>元素中:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>

    以上就是中级Web教程:HTML5表单元素的全部内容,更多的Web教程尽在开课吧广场Web教程频道。

有用
分享