HTML5 - 表单标签

HTML5 - 表单标签 首页 / HTML5入门教程 / HTML5 - 表单标签

Web Forms 2.0是对HTML4中的表单函数的扩展。与HTML4相比,HTML5中的表单元素和属性提供了更高程度的语义标签,使无涯教程摆脱了HTML4所需的繁琐脚本和样式。

HTML4 Input 标签

HTML4输入元素使用 type 属性指定数据类型。HTML4提供以下类型-

链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-web-forms2.html

来源:LearnFk无涯教程网

Sr.No.Type & Remark
1

text

单行输入文本

2

password

密码

3

checkbox

多选

4

radio

单选

5

submit

Form表单提交

无涯教程网

6

file

文件上传

7

image

图片

8

hidden

隐藏

9

select

下拉选择框

10

textarea

多行输入文本

11

button

按钮

以下是使用标签,单选按钮和提交按钮的简单示例-

... 
<form action="http://example.com/cgiscript.pl" method="post">  
   <p> 
      <label for="firstname">first name: </label> 
      <input type="text" id="firstname"><br /> 
   
      <label for="lastname">last name: </label> 
      <input type="text" id="lastname"><br /> 
   
      <label for="email">email: </label> 
      <input type="text" id="email"><br> 
   
      <input type="radio" name="sex" value="male"> Male<br> 
      <input type="radio" name="sex" value="female"> Female<br> 
      <input type="submit" value="send"> <input type="reset"> 
   </p> 
</form> 
 ... 

HTML5 Input 标签

除了上述属性外,HTML5输入元素还为 type 属性引入了几个新值,这些在下面列出。

Sr.No.Type & Remark
1 datetime

根据ISO 8601编码的日期和时间(年,月,日,小时,分钟,秒,几分之一秒),时区设置为UTC。

2 datetime-local

根据ISO 8601编码的日期和时间(年,月,日,小时,分钟,秒,几分之一秒),没有时区信息。

3 date

根据ISO 8601编码的日期(年,月,日)。

4 month

根据ISO 8601编码的日期,由一年和一个月组成。

5 week

根据ISO 8601编码的日期,由年和周组成。

6 time

根据ISO 8601编码的时间(小时,分钟,秒,小数秒)。

7 number

它仅接受数值。 step属性指定精度,默认为1。

8 range

范围类型用于应该包含数字范围内的值的输入字段。

9 email

它仅接受电子邮件值。如果您尝试提交简单文本,则会强制仅以email@example.com格式输入电子邮件地址。

10 url

它仅接受URL值。如果您尝试提交简单文本,它将强制仅以http://www.example.com格式或http://example.com格式输入URL地址。

Output 标签

HTML5引入了一个新元素<output>,用于表示不同类型输出的输出,例如脚本编写的输出,for属性的值是其他元素的ID的空格分隔列表。

<!DOCTYPE HTML>

<html>
   <head>
      <script type="text/javascript">
         
         function showResult() {
            x=document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value=x;
         }
      </script>
   </head>
   
   <body>

      <form action="/cgi-bin/html5.cgi" method="get" name="myform">
         Enter a value : <input type="text" name="newinput" />
         <input type="button" value="Result"  onclick="showResult();" />
         <output name="result"></output>
      </form>
		
   </body>
</html>

它将产生以下输出-

Placeholder 属性

HTML5引入了一个名为占位符的新属性<input>和<textarea>元素上的此属性向用户提示可以在字段中输入的内容占位符文本不得包含回车符或换行符。

这是占位符属性的简单语法-

<input type="text" name="search" placeholder="search the web"/>

仅最新版本的Mozilla,Safari和Crome浏览器支持此属性。

<!DOCTYPE HTML>

<html>
   <body>

      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" 
            placeholder="email@example.com"/>
         <input type="submit" value="submit" />
      </form>

   </body>
</html>

这将产生以下输出-

Autofocus 属性

HTML5引入了一个名为 autofocus 的新属性,该属性将按以下方式使用-

<input type="text" name="search" autofocus/>

仅Mozilla,Safari和Chrome浏览器的最新版本支持此属性。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="text" name="newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type="submit" value="submit" />
      </form>
      
   </body>
</html>

Required 属性

HTML5引入了一个名为 required 的新属性,表示该属性必须有值,不能空 -

<input type="text" name="search" required/>

仅Mozilla,Safari和Chrome浏览器的最新版本支持此属性。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="text" name="newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type="submit" value="submit" />
      </form>
      
   </body>
</html>

它将产生以下输出-

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

左耳听风 -〔陈皓〕

赵成的运维体系管理课 -〔赵成〕

趣谈网络协议 -〔刘超〕

从0开始学大数据 -〔李智慧〕

网络编程实战 -〔盛延敏〕

说透5G -〔杨四昌〕

手把手带你写一个Web框架 -〔叶剑峰〕

Tony Bai · Go语言第一课 -〔Tony Bai〕

Web漏洞挖掘实战 -〔王昊天〕

好记忆不如烂笔头。留下您的足迹吧 :)