Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

input type week really exist in HTML5?

HTML5 Web Development Front End Technology

The tag designates a field for user-enterable data. The most significant form element is the element. Depending on the type attribute, the element can be presented in a number of different ways.

The input element denotes a field for a week input because it has the value "week" in its type property. Instead of requiring users to input the value as a string, these fields could be represented in supporting browsers by controls that let users update it graphically (such as a calendar, for example).

Let?s jump into the article to discuss more about input type week really exist in HTML5.

A week and year value can be entered into an input field created by the tag with the type=week attribute. There is a calendar icon inside this area. This icon's click activates a week/year selector. Each browser has a unique user interface for the control. Support from browsers is patchy. A week and year formatted manual entry is also permitted in the week field.

Syntax

Following is the syntax for HTML input type=week

<input type="week">

Let?s look into the following examples for getting better understanding on input type=" week".

Example

In the following example we are simply creating a

with a week control. 
<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" target="_blank">
         <p>Choose Week:<input type="week" name="weekend">
         <input type="submit" value="SEND"></p>
      </form>
   </body>
</html>

Output

When the script gets executed, it will generate an output consisting of an input field allowing the user to choose a week manually or by using the calendar provided, as the input field was set to type=week.

Example

Considering the following example, we are providing a suggested value using element.

<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" method="post" target="_blank">
         <p>Select Week For Vacation:<input type="week" name="week" list="weeklist">
         <input type="submit" value="SEND">
         </p>
      </form>
      <datalist id="weeklist">
         <option value="2016-W52">
            <option value="2016-W12">
               <option value="2017-W03">
                  <option value="2018-W05">
                     <option value="2018-W06">
      </datalist>
   </body>
</html>

Output

On running the above script, it will generate an output consisting of an input field allowing the user to choose the week with the suggested values used in the script provided by the element.

Example

Look into the following example, where we are using min and max attribute to put restrictions to the values the user can input.

<!DOCTYPE HTML>
<html>
   <body>
      <form action="#" target="_blank">
         <p>Choose Week:<input type="week" name="selectedweek" min="2017-W04" max="2017-W15">
         <input type="submit" value="SEND">
         </p>
      </form>
   </body>
</html>

Output

When the script gets executed, it will generate an output consisting of an input field allowing the user to choose the week that should be selected from a particular week as it was mentioned by using min and max attributes, which add restriction to the input.

Updated on: 2023-10-11T16:46:25+05:30

643 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements