Safari 中的 HTML5 日期字段和占位符文本

如果您想在网页中添加一个包含年份、月份和日期的日期选择器，那么 HTML5 为您提供了一个“date”字段。它是在<input>元素中的一个类型。它在各种 Web 浏览器（如 Google Chrome、Internet Explorer 和 Firefox）中都能很好地工作。在这里，我们将学习它在 Safari 中的工作方式，Safari 也是一个 Web 浏览器。

首先让我们了解一下 Safari。

Safari

Safari 是 Apple 为其用户开发的一款图形化 Web 浏览器。它基本上是一个开源软件，专门为所有 Apple 设备设计。它主要运行在 Javascript 引擎上。它提供了强大的安全保护、众多自定义选项和更长的电池续航时间。在速度方面，它是世界上最快的浏览器。

HTML5 日期输入类型

HTML5 日期输入提供了一个简单的界面，用于选择完整日期格式（即 yyyy-mm-dd）的日期。

让我们通过一个例子来理解这一点。

示例

<html>
<head> </head>
<body> 
   <form>
      <label for = “demo”> <input id = “ demo” type= “date” name= “example”   > </label>
   </form>
</body>
</html>

当您点击下拉图标时，会出现一个日历供您选择日期。

这里,

表单元素

HTML5 的 <form> 元素用于创建一个容器，用户可以在其中输入信息。它由 <form> 标签表示。

表单元素的 action 属性定义了表单数据需要提交到的位置。

<form> 元素包含各种类型的表单元素。它们是 <input>、<label>、<button>、<output>、<textarea>、<select> 等。

语法

<form action= “ “> </form>

示例

<body>
   <form>
      Enter Your Name 
      <input type= “text” name= “ username”>
   </form>
</body>

标签元素

HTML5 的 label 元素为输入元素提供标签。使用标签可以更好地让用户了解输入的描述。

该

语法

<label for = “ “> </label>

示例

<body>
   <h2> Which type of games do you like? </h2> 
   <form>
   <label for= “indoor” > <input id = “indoor” type= “radio” name= “indoor-outdoor ”> Indoor </label>
   <label for= “outdoor”> <input id = ”outdoor” type= ”radio” name= ”indoor-outdoor “> Outdoor </label>
</body>

*单选按钮是输入的一种类型。每个单选按钮都嵌套在其自己的标签元素中。选择一个单选按钮会自动取消选择同一组中的其他按钮，确保用户只提供一个答案。

注意 - label 元素的 for 属性应该与input元素的id属性相同。

输入元素

input 元素允许用户输入信息。它由 <input> 标签表示。它是一个自闭合元素；不需要结束标签。它具有各种输入类型和属性。

输入类型

input 元素的 type 属性指定用户提供的输入类型。type 属性的值如下：

  • text - 文本形式的输入。这是默认值。

  • checkbox - 用于可以选择多个选项的选项。

  • radio - 用于只需要选择一个选项的选项。

  • color - 它指定颜色控件。它使用户能够在网页上选择颜色。

  • date - 用于选择完整日期格式（即 yyyy-mm-dd）的日期。

  • button - 它显示一个按钮，单击该按钮可以执行指定的函数。

  • datetime-local - 用于选择日期和时间，没有时区。

  • email - 用于输入电子邮件 ID。

  • file - 用于用户选择文件。

  • number - 用于输入数字。

input 元素的其他属性包括 name、id、required、min、max、placeholder、size、src 等。

示例

<body>
   <form>
      <label for = “email”> Enter your email id<input type = “email” name = “information” id= “email” placeholder = “[email protected]”></label>
   </form>
</body>

placeholder 属性

占位符是在用户未设置任何值时显示的表单元素文本。

示例

<form>
      <label for= “name”> <input type = “text” placeholder= “username” id= “name”> Enter Your Name </label>
  </form>

占位符属性不支持 input 类型为 date 的输入元素。但是，它在 Safari Web 浏览器上有效，因为它不支持 input 元素的 date 类型，这意味着此属性被忽略，默认情况下只显示纯文本字段。

以下代码在 Safari 上有效：

示例

<html>
   <style>
      input [type= ‘date’ ]  :: after{
         color: #fff;
         content: attr(placeholder);
      } 
   </style>
<body>
   <form>
      <input id = “dateofbirth” name = “mydate” value=”” type= “date” placeholder= “yyyy-mm-dd”>
   </form>
</body>
<html>

<style> 标签用于编写 CSS 代码。

语法

Element {
   //Code to be executed
};

::after 是一个伪元素，用于在元素内容之后插入内容。

结论

Safari 的桌面版本不包含原生的日期选择器，但 iOS 版本包含。而 Chrome 和其他浏览器会显示一个日历来选择日期。但是您可以为日期输入添加占位符属性（适用于 Safari）。占位符属性不会显示在支持 date 类型的浏览器中。

更新于：2022 年 10 月 13 日

7000+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告