Safari 中的 HTML5 日期字段和占位符文本
如果您想在网页中添加一个包含年、月、日的日期选择器，HTML5 为您提供了一个"date"字段。它是 <input> 元素中的一种类型。它在各种 Web 浏览器中都能正常工作，例如 Google Chrome、Internet Explorer 和 Firefox。这里我们将了解它在 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> 元素包含各种类型的 for 元素。它们包括 <input>、<label>、< button>、<output>、<textarea>、<select> 等。
语法
<form action= " "> </form>
示例
<body> <form> Enter Your Name <input type= "text" name= " username"> </form> </body>
标签元素
HTML5 的标签元素为输入元素提供标签。使用标签可以帮助用户更好地理解输入内容的描述。
label 标签用于表示标签元素。标签元素的 for 属性用于指定与该标签关联的表单元素的 ID。
语法
<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>
*单选按钮属于input类型。每个单选按钮都嵌套在其自己的label元素中。在这种情况下，选择单个单选按钮会自动取消选择同一组内的其他按钮，确保用户仅提供一个答案。
注意 - label元素的for属性应与input元素的id属性相同。
Input元素
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 = "example@gmail.com"></label> </form> </body>
placeholder 属性
占位符是当用户未设置值时显示的表单元素的文本。
示例
<form> <label for= "name"> <input type = "text" placeholder= "username" id= "name"> Enter Your Name </label> </form>
占位符属性不支持 date 类型的输入元素。但是，它在 Safari 浏览器上可以正常工作，因为它不支持 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 {
//要执行的代码
};
::after 是一个伪元素，用于在元素内容后插入一些内容。
结论
Safari 桌面版不包含原生的 datepicker，但 iOS 版包含。而 Chrome 和其他浏览器会显示日历来选择日期。不过，您可以为日期输入框添加 placeholder 属性(适用于 Safari)。placeholder 属性在支持日期类型的浏览器上不显示。
