HtmlHow-ToBeginner · 3 min read

How to Create Week Input in HTML: Simple Guide

To create a week input in HTML, use the <input type="week"> element. This lets users pick a specific year and week number from a calendar-like control in supported browsers.

📐

Syntax

The <input type="week"> element creates a control for selecting a year and week number. You can add attributes like name, id, and value to set default values or identify the input.

type="week": Specifies the input is for week selection.
name: Identifies the input when submitting a form.
value: Sets the default week in the format YYYY-Www (e.g., 2024-W15).

html

<input type="week" name="week" id="weekInput" value="2024-W15">

Output

A week picker input showing the 15th week of 2024 as default.

💻

Example

This example shows a simple form with a week input. The user can pick a year and week, then submit the form.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Week Input Example</title>
</head>
<body>
  <form>
    <label for="weekInput">Select a week:</label>
    <input type="week" id="weekInput" name="week" value="2024-W15">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A webpage with a labeled week input defaulting to week 15 of 2024 and a submit button.

⚠️

Common Pitfalls

Some common mistakes when using type="week" include:

Using an incorrect value format. It must be YYYY-Www, for example, 2024-W05.
Expecting support in all browsers. Some older browsers do not support week inputs and will treat it as a text input.
Not providing a label, which hurts accessibility.

Always test your form in multiple browsers to ensure the week input works as expected.

html

<!-- Wrong value format -->
<input type="week" value="15-2024">

<!-- Correct value format -->
<input type="week" value="2024-W15">

Output

The first input may not show a proper week picker; the second input shows the correct week picker.

📊

Quick Reference

Attribute	Description	Example
type	Defines input as week picker	type="week"
name	Name for form submission	name="week"
id	Unique identifier for label	id="weekInput"
value	Default week value in YYYY-Www	value="2024-W15"
min	Minimum selectable week	min="2023-W01"
max	Maximum selectable week	max="2025-W52"

✅

Key Takeaways

Use to let users select a year and week number easily.

The value format must be YYYY-Www, like 2024-W15, to work correctly.

Not all browsers support week inputs; test for fallback behavior.

Always include a label for accessibility and clarity.

You can set min and max attributes to limit selectable weeks.