HTML5 date field and placeholder text in Safari

If you want to add a date picker which includes the year, month and day, in your webpage, then HTML5 facilitates a “date” field for you. It is a type in <input> element. It works well in various web browsers like Google chrome, Internet Explorer and Firefox. Here we are going to learn about how it works in Safari which is also a web browser.

First let’s see about Safari.

Safari

Safari is a graphical web browser developed by Apple for its users. It is basically an open source software, specifically designed for all Apple devices. It runs on mainly on Javascript engine. It facilitates powerful security protections, numerous customization options and enhanced battery life. In terms of speed, it is world’s fastest browser.

HTML5 Date Input Type

The HTML5 date input provides an easy interface for choosing dates in full date format i.e. yyyy-mm-dd.

Let’s understand this with an example.

Example

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

When you click on the drop-down icon, a calendar appears for the selection of date.

Here,

Form element

The <form> element of HTML5 is used to create a container where users can give their input. It is represented by <form> tag.

The action attribute of form element defines where the data of the form needs to be submitted.

The <form> element contains various types of for elements. They are <input>, <label>, < button>, <output>, <textarea>, <select>, etc.

Syntax

<form action= “ “> </form>

Example

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

Label element

The label element of HTML5 provides a label to an input element. Use of labels gives a better understanding to the user readers about the description of the input.

The

Syntax

<label for = “ “> </label>

Example

<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>

*Radio buttons are type of input. Each radio button is nested in its own label element. In this selecting a single radio button automatically deselects the other buttons within the same group ensuring only one answer is provided by the user.

Note − The for attribute of label element should be same as id attribute of input element.

Input element

The input element allows users to give their input. It is represented by <input> tag. It is a self-closing element; it does not need a closing tag. It has various input types and attributes.

Input types

The type attribute of input element specifies the type of input given by the user. The values for the type attribute are as follows −

  • text − input in text form. It is the default value.

  • checkbox − used for the ones in which more than one option can be chosen.

  • radio − used for the ones in which only one option needs to be selected

  • color − it specifies the color control. It enables the user to choose a color on the web page

  • date − it is used to select a date in full date format i.e. yyyy-mm-dd.

  • button − it showcases a button which is to be clicked for doing the specified function.

  • datetime-local − it is used to select date and time with no time zone.

  • email − used to enter email id

  • file − used to select a file by the user.

  • number − used to enter a number

Other attributes of input element are name, id, required, min, max, placeholder, size, src, etc.

Example

<body>
   <form>
      <label for = “email”> Enter your email id<input type = “email” name = “information” id= “email” placeholder = “example@gmail.com”></label>
   </form>
</body>

placeholder attribute

Placeholder is a text that displays the form element when no value is set by the user.

Example

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

The placeholder attribute does not support input elements on the input type date. However, it works on Safari web browser because it does not support the date type of input element, which means this attribute is ignored and only plain text field is shown by default.

The following code works on Safari −

Example

<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> tag is used writing the codes of CSS.

Syntax

Element {
   //Code to be executed
};

::after is a pseudo element which used to insert something after the content of the element.

Conclusion

Safari does not include native datepicker for its desktop version but it does so for IOS. Whereas chrome and other browsers show a calendar to select the date. But you can add placeholder attribute to date input (for Safari). The placeholder attribute doesn’t display on browsers that support date type.

Updated on: 13-Oct-2022

6K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements