百度SEO优化 » html标签 » HTML5表单百科

HTML5表单百科

表单是互联网应用程序最重要的功能之一,它提供了一个界面,以一种简单而有效的方式在客户和用户之间分享信息。使用表单是任何商业应用的一个关键部分,无论是在线还是离线使用。网络表单一直是网络应用程序和网站的基础。没有它们,各种交易、讨论和聊天就难以实现。

SEO中的H标签
SEO中的H标签

什么是HTML5表单?

在HTML5之前就有表单,但处理输入的过程有点麻烦。HTML5为表单带来了新的功能,并为整个应用程序接受输入提供了一致性。在开发过程中,HTML5 表单也消耗了更少的时间。现在,网络开发人员不仅可以构建视觉效果极佳的表单,而且还可以通过定制的HTML5表单收集有效的、有价值的数据。

HTML5中引入的新输入类型

HTML5 带来了一些新的输入类型,通过提供本地输入来帮助用户,并使验证数据更加容易,而无需使用任何 JavaScript 代码。下表列出了HTML5中的新输入类型:

类型解释用法
date一个用于输入日期的控件。<input type="date">
datetime使用UTC日期和时间格式的日期和时间<input type="datetime">
datetime-local根据你当地时间的日期和时间<input type="datetime-local">
month月份和年份<input type="month">
time一天中的时间<input type="time">
week允许你挑选星期和年份。<input type="week">
color允许你输入一个简单的颜色值(该值为十六进制的颜色符号<input type="color"">
email使用标准的电子邮件格式验证输入<input type="email">
tel让你能够根据一个模式验证电话号码的格式<input type="tel">
search搜索一个数据集(像<datalist>HTML元素)。<input type="search">
range一个用于在两个数字之间挑选数字的滑块控件<input type="range">
number只接受数字<input type="number">
url只接受URL<input type="url">

HTML5表单与简单HTML表单的优势?

HTML5表单的内置验证功能将语义标记提升到了一个新的水平。它为编写脚本和样式提供了便利,而这在早期版本的HTML中是一项繁琐的任务。

即使在浏览器中禁用了Javascript,你仍然可以利用HTML5表单的优势。

如何创建HTML5表单

让我们通过查看在 HTML5 中创建用户注册表单的实际示例来了解 HTML5 表单的工作原理。

我们将学习如何创建一个简单的 HTML5 注册表单。首先,让我们从一个空白的 HTML 模板页面开始,如以下代码所示:

<!DOCTYPE html> 

<html lang="en"> 

  <head> 

      <meta charset="utf-8"> 

      <title> HTML5 表单教程 </title> 

      <link rel="stylesheet" href="style.css" > 

  </head> 

  <body> 

  </body> 

</html>

我们需要使用标签来告诉浏览器表单从这里开始:

<!DOCTYPE html> 

<html lang="en"> 

  <head> 

      <meta charset="utf-8"> 

      <title> HTML5 表单教程 </title> 

      <link rel="stylesheet" href="style.css" > 

  </head> 

  <body> 

    <form> 

    </form> 

  </body> 

</html>

从现在开始,我们将只检查位于 标签内的代码。

考虑到这一点,让我们使用form标签创建一个简短的用户注册表单,并创建输入字段,例如Name和Email。要使 ' name ' 字段成为必填项,请将required属性添加到该输入字段。

对于email address,您可以通过添加 email 属性来检查电子邮件地址的有效性,该属性将确保输入的文本是有效的电子邮件地址 - 否则会提示错误。此外,添加一个required属性以使其成为必填字段:

<form action="" method="">

   

      <legend>Registration Details</legend>

   

      <label>Name: <input type="text" required /></label>

      <label>Email: <input type="email" required /></label>

    ….




   <input type="submit" value="Register"/>

</form>

您还可以使用autofocus属性在加载表单页面时自动聚焦在“名称”输入字段上:

<input type="text" placeholder="Your Name" required autofocus/>

某些设备的屏幕空间可能有限,因此在这种情况下,您可以删除标签并用占位符替换它们。占位符也有助于向最终用户提供提示。

<input type="text" placeholder="Your Name" required autofocus/>  

<input type="email" placeholder="Email address" required />

用户可以通过从选项中选择来使用以前输入的数据。所述autocompete属性存储在数据列表中的数据,并允许用户选择先前插入的输入值。这样,用户只需选择值并在输入字段中使用它。请注意,应在字段(例如密码)中关闭自动完成功能,以避免未经身份验证的访问。

自动完成属性可以被应用于特定领域。如果要将其应用于表单的所有子元素(输入),则直接将其应用于表单元素。

下一步是使用地址字段。地址的文本可能有点长,所以这里最好使用<textarea>

 <textarea rows="3" cols="50" id="address" placeholder="Address"></textarea>

请注意,我们使用了两个新属性:' rows ' 和' cols '。' rows ' 属性描述了在出现滚动条之前出现在字段中的文本行数。另一方面,“ cols ”定义了每行中的字符数。

您可以尝试更改的值,看看textarea如何相应地收缩和扩展。

现在,我们有了最终的形式。完整代码如下所示:

<!DOCTYPE html> 

<html lang="en"> 

  <head> 

      <meta charset="utf-8"> 

      <title>HTML5 表单教程</title> 

      <link rel="stylesheet" href="style.css" > 

  </head> 

  <body> 

<form action="" method=""> 

      <legend>注册详情</legend> 

      <div> 

      <input type="text" placeholder="Name" required autofocus/> 

      </div > 

      <div>       

      <input type="email" placeholder="Email address" required /> 

      </div> 

      <div> 

      <textarea rows="3" cols="50" id="address" placeholder="Address"></textarea> 

      </div> 

     <div> 

     <input type="submit" value="Register"/>

     </div> 

</form> 

  </body> 

</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注