📘 Lesson  ·  Lesson 22

Form Attributes: required, pattern

Form Attributes: required, pattern

required — the one-word validator

<input type="text" name="student_name" required>
[Submit with it empty] → tooltip: "Please fill out this field." The form does NOT submit until it's filled.
A boolean attribute (its presence alone = yes). One word replaces what used to be a JavaScript function. Works on inputs, textareas and selects — on a select, the first option must have value="" for required to treat "-- Select --" as unfilled (there's the WHY behind that empty-option habit from last chapter).

placeholder vs value — hint vs content

<input type="text" name="city" placeholder="e.g. Aligarh">    gray HINT - vanishes on typing
<input type="text" name="city" value="Aligarh">               real PRE-FILLED content - submits!
placeholder: [ e.g. Aligarh ] ← gray; type one letter and it's gone; empty field submits "" value: [ Aligarh ] ← black; is actual data; submits city=Aligarh
The design rule interviewers love: placeholder is NOT a replacement for label. The moment the user types, the hint vanishes — halfway through a 10-field form they can't recall what field 3 wanted. Label stays visible forever. Professional pattern: label for the question + placeholder for a format example ("Mobile:" + placeholder "10 digits, no +91").

pattern — write your own validation rule

<input type="tel" name="mobile" pattern="[6-9][0-9]{9}"
       title="10-digit mobile number starting with 6-9" required>

<input type="text" name="pincode" pattern="[0-9]{6}" title="6-digit PIN code">
<input type="text" name="roll" pattern="[A-Z]{2}[0-9]{4}" title="e.g. KA1234">
Typing 5876543210 and submitting → "Please match the requested format: 10-digit mobile number starting with 6-9"
Reading [6-9][0-9]{9}: first character from 6-9 (Indian mobiles start there), then any digit, exactly 9 more times = 10 total. This mini-language is regex (regular expressions) — a full topic in our JavaScript course; for now these three copy-ready patterns cover mobile, PIN and roll number. The title text becomes the error message — always write a human-friendly one.

min, max, step, maxlength — numeric fences

<input type="number" name="marks" min="0" max="100">         marks can't be 105
<input type="date" name="dob" min="2008-01-01" max="2015-12-31">   DOB window
<input type="number" name="fees" min="0" step="500">         0, 500, 1000...
<input type="text" name="otp" maxlength="6">                 typing STOPS at 6 chars

min/max also work on dates (admission age windows!). step sets the allowed jumps. Note the difference in behaviour: maxlength physically blocks the 7th character while min/max complain at submit time.

readonly vs disabled — the classic pair

<input type="text" name="admission_no" value="ADM-2026-001" readonly>
<input type="text" name="school_code"  value="ALP-KHJ" disabled>
readonlydisabled
User can edit❌ No❌ No
LooksNormalGrayed out
Value SUBMITS with form✅ YES❌ NO!
Can receive focus✅ (can select/copy text)❌ Completely inert
The line that decides: readonly = "see it, don't touch it, it still submits" (auto-generated admission number the server must receive). disabled = "not applicable right now, pretend it doesn't exist" (its value never reaches the server). Many real bugs = using disabled and then wondering why the server received nothing.

autofocus and autocomplete

<input type="text" name="q" autofocus>               cursor lands here on page load
<input type="text" name="otp" autocomplete="off">    browser won't suggest old values
<input type="email" name="email" autocomplete="email">  browser fills saved email
  • autofocus: one per page — Google's search box behaviour.
  • autocomplete hints help browsers autofill correctly (email, name, tel, postal-code); "off" for OTP fields where old suggestions make no sense.

required — एक शब्द का validator

<input type="text" name="student_name" required>
[Khali chhod kar Submit] → tooltip: "Please fill out this field." Bhare bina form submit HOTA HI NAHI.
Boolean attribute (मौजूदगी ही = हां). एक शब्द उस काम को बदल देता है जो पहले JavaScript function करता था. Inputs, textareas और selects पर चलता है — select पर पहले option की value="" होनी चाहिए तभी required "-- Select --" को खाली मानता है (पिछले chapter की खाली-option आदत का WHY यही है).

placeholder vs value — hint vs content

<input type="text" name="city" placeholder="e.g. Aligarh">    gray HINT - type karte hi gayab
<input type="text" name="city" value="Aligarh">               asli PRE-FILLED content - submit hota hai!
placeholder: [ e.g. Aligarh ] ← gray; ek akshar likhte hi gaya; khali field "" bhejta hai value: [ Aligarh ] ← kala; asli data hai; city=Aligarh bhejta hai
Design rule जो interviewers को पसंद है: placeholder label का replacement NAHI है. User के type करते ही hint गायब — 10-field form के बीच में याद नहीं रहता field 3 क्या मांग रहा था. Label हमेशा दिखता रहता है. Professional pattern: सवाल के लिए label + format example के लिए placeholder ("Mobile:" + placeholder "10 digits, no +91").

pattern — अपना validation rule लिखिए

<input type="tel" name="mobile" pattern="[6-9][0-9]{9}"
       title="10-digit mobile number starting with 6-9" required>

<input type="text" name="pincode" pattern="[0-9]{6}" title="6-digit PIN code">
<input type="text" name="roll" pattern="[A-Z]{2}[0-9]{4}" title="e.g. KA1234">
5876543210 likhkar submit karne par → "Please match the requested format: 10-digit mobile number starting with 6-9"
[6-9][0-9]{9} पढ़ना: पहला character 6-9 में से (Indian mobiles वहीं से शुरू), फिर कोई भी digit, exactly 9 बार और = कुल 10. यह mini-language regex (regular expressions) है — हमारे JavaScript course का पूरा topic; अभी ये तीन copy-ready patterns mobile, PIN और roll number cover करते हैं. title का text error message बनता है — हमेशा इंसानी भाषा में लिखिए.

min, max, step, maxlength — numeric बाड़

<input type="number" name="marks" min="0" max="100">         marks 105 nahi ho sakte
<input type="date" name="dob" min="2008-01-01" max="2015-12-31">   DOB ki window
<input type="number" name="fees" min="0" step="500">         0, 500, 1000...
<input type="text" name="otp" maxlength="6">                 6 par typing RUK jati hai

min/max dates पर भी चलते हैं (admission की age window!). step allowed छलांगें तय करता है. Behaviour का फर्क note कीजिए: maxlength सातवां character घुसने ही नहीं देता जबकि min/max submit के समय शिकायत करते हैं.

readonly vs disabled — classic जोड़ी

<input type="text" name="admission_no" value="ADM-2026-001" readonly>
<input type="text" name="school_code"  value="ALP-KHJ" disabled>
readonlydisabled
User edit कर सकता है❌ नहीं❌ नहीं
दिखता हैNormalGray/धुंधला
Value form के साथ SUBMIT होती है✅ HAAN❌ NAHI!
Focus ले सकता है✅ (text select/copy हो सकता है)❌ पूरी तरह बेजान
फैसला करने वाली line: readonly = "देखो, छुओ मत, फिर भी submit होगा" (auto-generated admission number जो server को चाहिए). disabled = "अभी लागू नहीं, मानो है ही नहीं" (value server तक कभी नहीं पहुंचती). कई असली bugs = disabled लगाकर सोचना server को कुछ मिला क्यों नहीं.

autofocus और autocomplete

<input type="text" name="q" autofocus>               page khulte hi cursor yahan
<input type="text" name="otp" autocomplete="off">    browser purani values suggest nahi karega
<input type="email" name="email" autocomplete="email">  browser saved email bhar dega
  • autofocus: page में एक — Google के search box वाला behaviour.
  • autocomplete hints browser को सही autofill में मदद करते हैं (email, name, tel, postal-code); OTP fields पर "off" — पुरानी suggestions वहां बेतुकी हैं.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.