forms-part-3-validation-and-attributes - html Interview Questions | Preplance

1. Which attribute makes a form field mandatory?

Difficulty: EasyType: MCQTopic: Form Validation

The required attribute makes a form field mandatory. When you add required to an input, select, or textarea, the browser prevents form submission if that field is empty. The browser displays an error message and focuses on the empty required field. This provides immediate feedback without needing server validation. Required is a boolean attribute, meaning you just add the word required without a value. It works with most input types including text, email, password, number, url, checkbox, radio, file, and date. For select dropdowns, required ensures an option other than the first one is selected. For checkboxes, required means the checkbox must be checked. However, required is only client-side validation and can be bypassed. Always validate required fields on the server as well for security.

Example code

<!-- Required text input -->
<form>
  <label for="name">Name (required):</label>
  <input type="text" 
         id="name" 
         name="name" 
         required>
  <button type="submit">Submit</button>
</form>

<!-- Required email -->
<form>
  <input type="email" 
         name="email" 
         placeholder="Email" 
         required>
  <button type="submit">Subscribe</button>
</form>

<!-- Required checkbox -->
<form>
  <label>
    <input type="checkbox" 
           name="terms" 
           required>
    I agree to terms (required)
  </label>
  <button type="submit">Register</button>
</form>

<!-- Required select -->
<form>
  <select name="country" required>
    <option value="">Choose country</option>
    <option value="us">USA</option>
    <option value="uk">UK</option>
  </select>
  <button type="submit">Continue</button>
</form>

2. Which attribute uses regular expressions for validation?

Difficulty: MediumType: MCQTopic: Form Validation

The pattern attribute uses regular expressions for validation. It allows you to specify a pattern that the input value must match. For example, pattern equals square bracket 0 hyphen 9 close bracket curly brace 3 close curly brace requires exactly three digits. The browser checks if the input matches the pattern before allowing submission. If it does not match, the browser shows an error message. Pattern validation is powerful for enforcing specific formats like phone numbers, zip codes, or custom formats. You can use the title attribute to provide a helpful message explaining the required format. Pattern only works with text-based input types like text, tel, email, url, password, and search. It is ignored for other types. Remember that pattern validation is client-side only and can be bypassed, so always validate on the server too.

Example code

<!-- US phone number pattern -->
<form>
  <label for="phone">Phone (XXX-XXX-XXXX):</label>
  <input type="tel" 
         id="phone" 
         name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         title="Format: 123-456-7890" 
         required>
</form>

<!-- Zip code pattern -->
<form>
  <label for="zip">ZIP Code:</label>
  <input type="text" 
         id="zip" 
         name="zip" 
         pattern="[0-9]{5}" 
         title="5-digit ZIP code" 
         required>
</form>

<!-- Username pattern (letters and numbers only) -->
<form>
  <label for="username">Username:</label>
  <input type="text" 
         id="username" 
         name="username" 
         pattern="[A-Za-z0-9]+" 
         title="Only letters and numbers allowed" 
         minlength="3" 
         required>
</form>

<!-- Custom format pattern -->
<form>
  <label for="code">Product Code (ABC-123):</label>
  <input type="text" 
         id="code" 
         name="code" 
         pattern="[A-Z]{3}-[0-9]{3}" 
         title="Format: ABC-123" 
         required>
</form>

3. What happens to a disabled input when the form is submitted?

Difficulty: MediumType: MCQTopic: Form Fields

A disabled input's value is not sent to the server when the form is submitted. The disabled attribute completely removes the field from form submission. Disabled fields appear grayed out and users cannot focus, edit, or interact with them. They are effectively not part of the form. This is the key difference from readonly, which prevents editing but still submits the value. Disabled is useful for temporarily preventing access to fields based on conditions, like disabling a submit button until all required fields are filled, or disabling fields that do not apply based on other selections. When you disable a field, it is excluded from form data, validation is not applied, and the field cannot receive focus. Disabled works with all input types, buttons, select, and textarea elements.

Example code

<!-- Disabled input (value NOT submitted) -->
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" 
         id="name" 
         name="name" 
         value="John Doe">
  
  <label for="inactive">Inactive Field:</label>
  <input type="text" 
         id="inactive" 
         name="inactive_field" 
         value="This will NOT be submitted" 
         disabled>
  
  <button type="submit">Submit</button>
</form>
<!-- Only "name" will be submitted, "inactive_field" is ignored -->

<!-- Conditional disabling -->
<form>
  <label>
    <input type="checkbox" 
           id="shipping" 
           name="same_address" 
           onchange="toggleShipping()">
    Shipping same as billing
  </label>
  
  <input type="text" 
         id="ship-address" 
         name="shipping_address" 
         placeholder="Shipping Address" 
         disabled>
</form>

<!-- Disabled submit button -->
<form>
  <input type="email" 
         name="email" 
         required>
  <button type="submit" disabled id="submit-btn">
    Submit (Fill all fields first)
  </button>
</form>

4. What does autocomplete="off" do?

Difficulty: MediumType: MCQTopic: Form Fields

The autocomplete equals off disables browser auto-fill suggestions for that input field. Browsers remember values users previously entered and offer to auto-fill them. Setting autocomplete to off prevents this behavior. This is useful for sensitive fields, one-time codes, new passwords, or fields where suggestions would not be helpful. The autocomplete attribute can also have specific values like name, email, tel, or cc-number to provide hints about what type of data the field expects. These hints help browsers provide better auto-fill suggestions. For example, autocomplete equals email tells the browser this field expects an email address. Modern browsers use these hints to auto-fill forms more accurately. You can set autocomplete on individual inputs or on the form element to apply to all fields. Use autocomplete equals off for sensitive data but allow it for convenience fields like addresses and emails.

Example code

<!-- Disable autocomplete for sensitive field -->
<form>
  <label for="credit-card">Credit Card:</label>
  <input type="text" 
         id="credit-card" 
         name="cc" 
         autocomplete="off" 
         required>
  
  <label for="cvv">CVV:</label>
  <input type="text" 
         id="cvv" 
         name="cvv" 
         autocomplete="off" 
         maxlength="3" 
         required>
</form>

<!-- Enable autocomplete with hints -->
<form autocomplete="on">
  <label for="name">Full Name:</label>
  <input type="text" 
         id="name" 
         name="name" 
         autocomplete="name" 
         required>
  
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         name="email" 
         autocomplete="email" 
         required>
  
  <label for="tel">Phone:</label>
  <input type="tel" 
         id="tel" 
         name="phone" 
         autocomplete="tel" 
         required>
</form>

<!-- New password (no suggestions) -->
<form>
  <label for="new-pass">New Password:</label>
  <input type="password" 
         id="new-pass" 
         name="password" 
         autocomplete="new-password" 
         required>
</form>

5. Explain HTML5 form validation with examples.

Difficulty: MediumType: SubjectiveTopic: Form Validation

HTML5 form validation provides built-in client-side validation without requiring JavaScript. Understanding HTML5 validation is essential for creating user-friendly forms with immediate feedback. HTML5 validation works automatically when users submit forms. The browser checks validation rules defined by HTML attributes and prevents submission if validation fails. Validation occurs before the form data is sent to the server, providing instant feedback. Common validation attributes include required, which ensures a field is not empty. The pattern attribute validates against regular expressions for custom formats. The min and max attributes restrict numeric ranges. The minlength and maxlength attributes control string length. The type attribute itself provides validation, with type equals email checking for valid email format, type equals url checking for URLs, and type equals number ensuring numeric input. When validation fails, browsers display default error messages. These messages vary by browser and language. You can customize messages using the setCustomValidity method in JavaScript or the title attribute for pattern validation. HTML5 validation types include field presence with required, data type validation with input types like email and url, format validation with pattern, range validation with min and max, and length validation with minlength and maxlength. Benefits of HTML5 validation include immediate feedback without server round trips, improved user experience with inline error messages, reduced server load by catching errors early, better accessibility with ARIA attributes automatically added, and standardized validation across forms. However, HTML5 validation has limitations. It is client-side only and can be bypassed by disabling JavaScript or manipulating the HTML. Browser support varies for some features. Error messages are not fully customizable without JavaScript. Complex validation logic may require JavaScript. Validation cannot check against server data like existing usernames. Best practices include always combining client-side HTML5 validation with server-side validation for security. Use appropriate input types to get automatic validation. Provide helpful error messages using title or JavaScript. Test validation in multiple browsers. Consider progressive enhancement, where the form works without JavaScript but enhances with it. Use fieldset and legend to group related fields. Add aria-describedby for additional context. Common patterns include email validation, phone number patterns, password requirements, date ranges, and numeric constraints. Understanding HTML5 validation demonstrates knowledge of modern form development and user experience principles, topics commonly discussed in web development interviews.

Example code

<!-- EMAIL VALIDATION -->
<form>
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         name="email" 
         required>
  <!-- Validates email format automatically -->
  <button type="submit">Subscribe</button>
</form>

<!-- PATTERN VALIDATION -->
<form>
  <label for="phone">Phone (XXX-XXX-XXXX):</label>
  <input type="tel" 
         id="phone" 
         name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         title="Format: 123-456-7890" 
         required>
  <button type="submit">Submit</button>
</form>

<!-- MIN/MAX VALIDATION -->
<form>
  <label for="age">Age (18-100):</label>
  <input type="number" 
         id="age" 
         name="age" 
         min="18" 
         max="100" 
         required>
  
  <label for="date">Appointment (next 30 days):</label>
  <input type="date" 
         id="date" 
         name="date" 
         min="2024-01-01" 
         max="2024-01-31" 
         required>
  
  <button type="submit">Book</button>
</form>

<!-- LENGTH VALIDATION -->
<form>
  <label for="username">Username (3-15 chars):</label>
  <input type="text" 
         id="username" 
         name="username" 
         minlength="3" 
         maxlength="15" 
         pattern="[A-Za-z0-9]+" 
         title="Letters and numbers only" 
         required>
  
  <label for="password">Password (8+ chars):</label>
  <input type="password" 
         id="password" 
         name="password" 
         minlength="8" 
         required>
  
  <button type="submit">Register</button>
</form>

<!-- COMPREHENSIVE VALIDATION EXAMPLE -->
<form action="/register" method="POST">
  <!-- Required text with pattern -->
  <label for="user">Username:</label>
  <input type="text" 
         id="user" 
         name="username" 
         pattern="[A-Za-z0-9_]{3,15}" 
         title="3-15 characters, letters, numbers, underscore only" 
         required>
  
  <!-- Email validation -->
  <label for="mail">Email:</label>
  <input type="email" 
         id="mail" 
         name="email" 
         required>
  
  <!-- URL validation -->
  <label for="website">Website:</label>
  <input type="url" 
         id="website" 
         name="website" 
         placeholder="https://example.com">
  
  <!-- Number with range -->
  <label for="years">Years of Experience:</label>
  <input type="number" 
         id="years" 
         name="experience" 
         min="0" 
         max="50" 
         required>
  
  <!-- Password with length -->
  <label for="pwd">Password:</label>
  <input type="password" 
         id="pwd" 
         name="password" 
         minlength="8" 
         maxlength="50" 
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
         title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters" 
         required>
  
  <!-- Required checkbox -->
  <label>
    <input type="checkbox" 
           name="terms" 
           required>
    I agree to terms
  </label>
  
  <button type="submit">Register</button>
</form>

6. What's the difference between readonly and disabled attributes?

Difficulty: MediumType: SubjectiveTopic: Form Fields

The readonly and disabled attributes both prevent users from editing form inputs, but they have significant differences in behavior and purpose. Understanding these differences is important for creating functional forms. The readonly attribute prevents editing but keeps the field active and includes its value in form submission. Readonly fields appear normal and can receive focus. Users can click on them, tab to them, and select or copy the text. The cursor appears when focused, but typing has no effect. The value is sent to the server when the form submits. Readonly is typically used for displaying information that should not be changed but needs to be submitted, like auto-generated order numbers, user IDs from the database, calculated totals that update dynamically, or pre-filled data that should not be edited but must be sent to the server. Readonly fields remain part of the form and participate in validation. The disabled attribute completely removes the field from form functionality. Disabled fields appear grayed out and cannot receive focus. Users cannot click, tab to, or interact with them in any way. Most importantly, disabled field values are not sent to the server when the form submits. The field is effectively not part of the form at all. Disabled is used for fields that should not be editable or submitted, like temporarily disabling submit buttons until conditions are met, hiding irrelevant fields based on other selections, showing options that are not currently available, or preventing access to features based on permissions. Key differences include form submission, where readonly values are submitted but disabled values are not. Focus behavior varies, with readonly fields being focusable while disabled fields are not. Visual appearance shows readonly fields looking normal, while disabled fields appear grayed out. User interaction allows readonly fields to be selected and copied, while disabled fields cannot be interacted with. Validation applies to readonly fields but is skipped for disabled fields. Styling differs, with readonly using the readonly pseudo-class and disabled using the disabled pseudo-class. Use cases are distinct, with readonly for data that should not change but must be submitted, and disabled for fields that should not exist in the current context. Practical examples include order forms where the order ID is readonly because it should not be changed but must be submitted for processing. A shipping address might be disabled if users check same as billing, removing it from submission entirely. An account balance display might be readonly to show the current balance without allowing changes, while submitting it for verification. Best practices include using readonly when the field value must be sent to the server. Use disabled when the field should not be part of the submission. Consider using hidden inputs instead of readonly for values that do not need to be visible. For better accessibility, ensure readonly and disabled fields are clearly distinguishable. Use JavaScript to conditionally enable or disable fields based on user actions. Always validate on the server regardless of readonly or disabled status on the client. Understanding the distinction between readonly and disabled demonstrates knowledge of form behavior and data handling, topics commonly covered in technical interviews.

Example code

<!-- READONLY EXAMPLES -->
<form action="/update" method="POST">
  <!-- Readonly: Value IS submitted -->
  <label for="orderid">Order ID:</label>
  <input type="text" 
         id="orderid" 
         name="order_id" 
         value="ORD-12345" 
         readonly>
  <!-- User can see and copy, but not edit -->
  <!-- Value "ORD-12345" will be sent to server -->
  
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         name="email" 
         value="john@example.com">
  <!-- This CAN be edited -->
  
  <button type="submit">Update</button>
</form>

<!-- DISABLED EXAMPLES -->
<form action="/submit" method="POST">
  <!-- Disabled: Value is NOT submitted -->
  <label for="inactive">Inactive Field:</label>
  <input type="text" 
         id="inactive" 
         name="inactive_field" 
         value="This will NOT be sent" 
         disabled>
  <!-- Field appears grayed out -->
  <!-- Value will NOT be sent to server -->
  
  <label for="name">Name:</label>
  <input type="text" 
         id="name" 
         name="name" 
         value="John Doe">
  <!-- This will be sent -->
  
  <button type="submit">Submit</button>
</form>
<!-- Server only receives name=John Doe -->
<!-- inactive_field is completely ignored -->

<!-- PRACTICAL COMPARISON -->
<form action="/checkout" method="POST">
  <!-- Readonly subtotal (calculated, needs to submit) -->
  <label for="subtotal">Subtotal:</label>
  <input type="text" 
         id="subtotal" 
         name="subtotal" 
         value="$100.00" 
         readonly>
  <!-- Readonly: shown and submitted -->
  
  <!-- Disabled shipping (not needed if same as billing) -->
  <label>
    <input type="checkbox" 
           id="same-address" 
           onchange="toggleShipping()">
    Shipping same as billing
  </label>
  
  <input type="text" 
         id="shipping" 
         name="shipping_address" 
         placeholder="Shipping Address" 
         disabled>
  <!-- Disabled: completely removed from submission -->
  
  <button type="submit">Complete Purchase</button>
</form>

<!-- CONDITIONAL ENABLING -->
<form>
  <label>
    <input type="radio" 
           name="account_type" 
           value="personal" 
           checked 
           onchange="updateFields()">
    Personal
  </label>
  
  <label>
    <input type="radio" 
           name="account_type" 
           value="business" 
           onchange="updateFields()">
    Business
  </label>
  
  <!-- Disabled when Personal is selected -->
  <input type="text" 
         id="company" 
         name="company_name" 
         placeholder="Company Name" 
         disabled>
  
  <!-- Always readonly -->
  <input type="text" 
         name="user_id" 
         value="USR-789" 
         readonly>
</form>

7. How does the pattern attribute work in form validation?

Difficulty: MediumType: SubjectiveTopic: Form Validation

The pattern attribute provides powerful validation using regular expressions to enforce specific formats for text input. Understanding pattern validation is essential for creating forms with custom validation requirements. The pattern attribute accepts a JavaScript regular expression that the input value must match. When users submit the form, the browser checks if the input matches the pattern. If it does not match, the browser prevents submission and displays an error message. Pattern validation only works with text-based input types including text, tel, email, url, password, and search. It is ignored for other input types. The pattern is applied to the entire value, so you do not need to add anchors like caret or dollar sign. Basic pattern examples include digits only with pattern equals square bracket 0 hyphen 9 close bracket plus, which allows one or more digits. Letters only uses pattern equals square bracket A hyphen Z a hyphen z close bracket plus for one or more letters. Alphanumeric uses pattern equals square bracket A hyphen Z a hyphen z 0 hyphen 9 close bracket plus. Exact length uses pattern equals square bracket 0 hyphen 9 close bracket curly brace 5 close curly brace for exactly five digits. Range uses pattern equals square bracket 0 hyphen 9 close bracket curly brace 3 comma 6 close curly brace for three to six digits. Common practical patterns include US phone numbers with pattern equals square bracket 0 hyphen 9 close bracket curly brace 3 close curly brace hyphen square bracket 0 hyphen 9 close bracket curly brace 3 close curly brace hyphen square bracket 0 hyphen 9 close bracket curly brace 4 close curly brace for format 123-456-7890. ZIP codes use pattern equals square bracket 0 hyphen 9 close bracket curly brace 5 close curly brace for five-digit codes. Credit cards can use pattern equals square bracket 0 hyphen 9 close bracket curly brace 16 close curly brace for 16 digits. Usernames might use pattern equals square bracket A hyphen Z a hyphen z 0 hyphen 9 underscore close bracket curly brace 3 comma 15 close curly brace for alphanumeric with underscores, three to fifteen characters. Hexadecimal colors use pattern equals hashtag square bracket 0 hyphen 9 A hyphen F close bracket curly brace 6 close curly brace. The title attribute provides crucial user guidance. When validation fails, some browsers show the title text in the error message. Always include a title that explains the required format in plain language. For example, title equals Format colon 123 hyphen 456 hyphen 7890. Advanced pattern features include character classes, where square bracket abc close bracket matches a, b, or c. Square bracket caret abc close bracket matches anything except a, b, or c. Square bracket a hyphen z close bracket matches any lowercase letter. Quantifiers include asterisk for zero or more, plus for one or more, question mark for zero or one, and curly brace n close curly brace for exactly n. Curly brace n comma close curly brace means n or more. Curly brace n comma m close curly brace means between n and m. Grouping uses parentheses like parenthesis abc close parenthesis plus matches abc, abcabc, etc. Alternation uses pipe like cat pipe dog matches cat or dog. Escape special characters with backslash like backslash dot matches a literal period. Best practices include keeping patterns as simple as possible for user understanding. Use title to explain the format requirement clearly. Test patterns with valid and invalid inputs before deployment. Remember that pattern is case-sensitive unless you use both uppercase and lowercase in character classes. Combine pattern with other attributes like minlength, maxlength, and required for comprehensive validation. Always validate on the server as pattern can be bypassed. Consider providing real-time feedback with JavaScript for better user experience. Limitations include pattern validation being client-side only and bypassable. Regular expressions can be complex and hard to maintain. Some users may not understand error messages. Browser support varies for complex regex features. Pattern cannot validate against server data. Understanding pattern validation demonstrates advanced knowledge of form validation and regular expressions, topics frequently tested in technical interviews. Many companies ask candidates to write patterns for common formats or debug incorrect patterns.

Example code

<!-- US PHONE NUMBER -->
<form>
  <label for="phone">Phone Number:</label>
  <input type="tel" 
         id="phone" 
         name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         title="Format: 123-456-7890" 
         placeholder="123-456-7890" 
         required>
  <button type="submit">Submit</button>
</form>

<!-- USERNAME (alphanumeric + underscore, 3-15 chars) -->
<form>
  <label for="username">Username:</label>
  <input type="text" 
         id="username" 
         name="username" 
         pattern="[A-Za-z0-9_]{3,15}" 
         title="3-15 characters: letters, numbers, underscore only" 
         required>
</form>

<!-- ZIP CODE (5 or 9 digits) -->
<form>
  <label for="zip">ZIP Code:</label>
  <input type="text" 
         id="zip" 
         name="zip" 
         pattern="[0-9]{5}(-[0-9]{4})?" 
         title="5 digits or 5+4 format (12345 or 12345-6789)" 
         placeholder="12345 or 12345-6789" 
         required>
</form>

<!-- PASSWORD (min 8 chars, 1 uppercase, 1 lowercase, 1 number) -->
<form>
  <label for="password">Password:</label>
  <input type="password" 
         id="password" 
         name="password" 
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
         title="At least 8 characters with 1 uppercase, 1 lowercase, and 1 number" 
         minlength="8" 
         required>
</form>

<!-- EMAIL (custom pattern) -->
<form>
  <label for="email">Work Email:</label>
  <input type="text" 
         id="email" 
         name="email" 
         pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" 
         title="Valid email address" 
         required>
</form>

<!-- CREDIT CARD (16 digits) -->
<form>
  <label for="cc">Credit Card:</label>
  <input type="text" 
         id="cc" 
         name="card" 
         pattern="[0-9]{16}" 
         title="16-digit card number" 
         placeholder="1234567890123456" 
         maxlength="16" 
         required>
</form>

<!-- PRODUCT CODE (format: ABC-123) -->
<form>
  <label for="code">Product Code:</label>
  <input type="text" 
         id="code" 
         name="product_code" 
         pattern="[A-Z]{3}-[0-9]{3}" 
         title="Format: ABC-123 (3 uppercase letters, hyphen, 3 digits)" 
         placeholder="ABC-123" 
         required>
</form>

<!-- HEX COLOR -->
<form>
  <label for="color">Color Code:</label>
  <input type="text" 
         id="color" 
         name="color" 
         pattern="#[0-9A-Fa-f]{6}" 
         title="Hex color code (e.g., #FF5733)" 
         placeholder="#FF5733" 
         maxlength="7" 
         required>
</form>

<!-- COMPREHENSIVE REGISTRATION FORM -->
<form action="/register" method="POST">
  <!-- Username pattern -->
  <input type="text" 
         name="username" 
         pattern="[A-Za-z0-9_]{3,15}" 
         title="3-15 characters" 
         required>
  
  <!-- Email (using type=email + pattern) -->
  <input type="email" 
         name="email" 
         pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" 
         title="Valid email" 
         required>
  
  <!-- Phone pattern -->
  <input type="tel" 
         name="phone" 
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
         title="123-456-7890" 
         required>
  
  <!-- Strong password pattern -->
  <input type="password" 
         name="password" 
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" 
         title="Min 8 chars with uppercase, lowercase, number, special char" 
         required>
  
  <button type="submit">Register</button>
</form>

8. What does the formaction attribute on a submit button do?

Difficulty: MediumType: MCQTopic: Form Action

The formaction attribute on a submit button overrides the form's action URL for that specific button. This allows different buttons to submit the same form to different URLs. For example, one form might have a button to save data and another button to delete data, each going to different endpoints. The formaction is specified on the button element, not the input. When that button is clicked, the form submits to the URL in formaction instead of the form's action attribute. This is useful for forms with multiple actions like Save, Delete, or Archive. You can also use formmethod to override the form's method for specific buttons. These attributes give you flexibility to handle different actions without multiple forms. The formaction attribute only works on submit buttons, either button type equals submit or input type equals submit.

Example code

<!-- Multiple submit buttons with different actions -->
<form action="/default" method="POST">
  <input type="text" name="data" required>
  
  <!-- Submit to /save -->
  <button type="submit" 
          formaction="/save">
    Save
  </button>
  
  <!-- Submit to /delete -->
  <button type="submit" 
          formaction="/delete" 
          formmethod="DELETE">
    Delete
  </button>
  
  <!-- Submit to /archive -->
  <button type="submit" 
          formaction="/archive">
    Archive
  </button>
</form>

<!-- Article editor with multiple actions -->
<form action="/articles" method="POST">
  <input type="text" name="title" placeholder="Title" required>
  <textarea name="content" required></textarea>
  
  <button type="submit" 
          formaction="/articles/draft">
    Save Draft
  </button>
  
  <button type="submit" 
          formaction="/articles/publish">
    Publish
  </button>
  
  <button type="submit" 
          formaction="/articles/preview" 
          formmethod="GET" 
          formtarget="_blank">
    Preview
  </button>
</form>

9. What does the novalidate attribute on a form do?

Difficulty: MediumType: MCQTopic: Form Validation

The novalidate attribute disables HTML5 form validation. When you add novalidate to a form tag, the browser skips all client-side validation checks when the form is submitted. Fields with required, pattern, min, max, and other validation attributes are not checked. The form submits immediately without showing validation error messages. This is useful when you want to handle all validation with JavaScript or when testing forms during development. You can also use the formnovalidate attribute on submit buttons to bypass validation for specific submit actions. For example, a Save Draft button might use formnovalidate to allow saving incomplete forms, while the main Submit button validates normally. However, disabling client-side validation means you must rely entirely on server-side validation for data quality and security.

Example code

<!-- Form without validation -->
<form action="/submit" method="POST" novalidate>
  <input type="email" 
         name="email" 
         required>
  <!-- Required is ignored, form submits without checking -->
  
  <input type="number" 
         name="age" 
         min="18" 
         required>
  <!-- Min and required are ignored -->
  
  <button type="submit">Submit</button>
</form>

<!-- Different buttons with different validation -->
<form action="/save" method="POST">
  <input type="text" 
         name="title" 
         required>
  <textarea name="content" 
            required></textarea>
  
  <!-- Save draft without validation -->
  <button type="submit" 
          name="action" 
          value="draft" 
          formnovalidate>
    Save Draft
  </button>
  
  <!-- Publish with validation -->
  <button type="submit" 
          name="action" 
          value="publish">
    Publish
  </button>
</form>

10. Which attributes restrict the range of numeric inputs?

Difficulty: EasyType: MCQTopic: Form Validation

The min and max attributes restrict the range of numeric inputs. The min attribute sets the minimum acceptable value, and max sets the maximum. For example, min equals 1 max equals 100 allows values between 1 and 100. If users enter a value outside this range, the browser shows an error on submission. These attributes work with number, date, time, range, and other numeric input types. For number inputs, min and max specify numeric boundaries. For date inputs, they specify date ranges. For range sliders, they define the slider limits. You can also use the step attribute with min and max to control allowed increments. Min and max validation improves data quality by ensuring values fall within acceptable ranges.

Example code

<!-- Age with min and max -->
<form>
  <label for="age">Age (18-100):</label>
  <input type="number" 
         id="age" 
         name="age" 
         min="18" 
         max="100" 
         required>
</form>

<!-- Date range -->
<form>
  <label for="appointment">Appointment Date:</label>
  <input type="date" 
         id="appointment" 
         name="date" 
         min="2024-01-01" 
         max="2024-12-31" 
         required>
</form>

<!-- Quantity selector -->
<form>
  <label for="qty">Quantity (1-10):</label>
  <input type="number" 
         id="qty" 
         name="quantity" 
         min="1" 
         max="10" 
         value="1" 
         required>
</form>

<!-- Price range -->
<form>
  <label for="price">Price ($10-$1000):</label>
  <input type="number" 
         id="price" 
         name="price" 
         min="10" 
         max="1000" 
         step="0.01" 
         required>
</form>

11. Which attribute limits the number of characters in an input?

Difficulty: EasyType: MCQTopic: Form Validation

The maxlength attribute limits the number of characters users can enter in an input field. Once the maximum is reached, the browser prevents further typing. For example, maxlength equals 10 allows only 10 characters. Unlike other validation attributes that check on submission, maxlength prevents exceeding the limit during typing. This provides immediate feedback and prevents user frustration. Maxlength works with text, email, password, search, tel, and url input types. It also works with textarea elements. You can combine maxlength with minlength to enforce both minimum and maximum lengths. For example, passwords might require minlength equals 8 and maxlength equals 50. The maxlength attribute is useful for database fields with character limits, social media posts, usernames, or any input with length restrictions.

Example code

<!-- Username with maxlength -->
<form>
  <label for="username">Username (max 15 chars):</label>
  <input type="text" 
         id="username" 
         name="username" 
         maxlength="15" 
         required>
</form>

<!-- Tweet-like input -->
<form>
  <label for="tweet">Message (max 280 chars):</label>
  <textarea id="tweet" 
            name="message" 
            maxlength="280" 
            rows="4"></textarea>
  <p id="char-count">0 / 280</p>
</form>

<!-- Password with min and max length -->
<form>
  <label for="password">Password:</label>
  <input type="password" 
         id="password" 
         name="password" 
         minlength="8" 
         maxlength="50" 
         required>
  <small>8-50 characters required</small>
</form>

<!-- Phone number -->
<form>
  <label for="phone">Phone (10 digits):</label>
  <input type="tel" 
         id="phone" 
         name="phone" 
         maxlength="10" 
         pattern="[0-9]{10}" 
         required>
</form>

12. What does the readonly attribute do?

Difficulty: MediumType: MCQTopic: Form Fields

The readonly attribute prevents users from editing an input field but still allows the value to be submitted with the form. Readonly fields display normally and users can focus on them, copy the text, and navigate through them. However, users cannot modify the value. The field appears as part of the form and its value is included when the form is submitted. Readonly is useful for displaying information that should not be changed, like auto-generated IDs, calculated totals, or pre-filled data from the database. It is different from disabled, which completely removes the field from form submission. Readonly works with text, password, email, number, date, and other input types. It does not work with checkboxes, radio buttons, or hidden inputs. Use readonly when you want to show data that should not be edited but needs to be submitted.

Example code

<!-- Readonly input with pre-filled data -->
<form action="/update-profile" method="POST">
  <label for="userid">User ID:</label>
  <input type="text" 
         id="userid" 
         name="user_id" 
         value="12345" 
         readonly>
  
  <label for="email">Email (can edit):</label>
  <input type="email" 
         id="email" 
         name="email" 
         value="john@example.com">
  
  <button type="submit">Update</button>
</form>
<!-- User ID is readonly but will be submitted -->

<!-- Order summary with readonly totals -->
<form>
  <label for="subtotal">Subtotal:</label>
  <input type="text" 
         id="subtotal" 
         name="subtotal" 
         value="$100.00" 
         readonly>
  
  <label for="tax">Tax:</label>
  <input type="text" 
         id="tax" 
         name="tax" 
         value="$10.00" 
         readonly>
  
  <label for="total">Total:</label>
  <input type="text" 
         id="total" 
         name="total" 
         value="$110.00" 
         readonly>
</form>

13. What does the autofocus attribute do?

Difficulty: EasyType: MCQTopic: Form Fields

The autofocus attribute automatically focuses an input field when the page loads. The cursor appears in the field, ready for the user to type without clicking. This improves user experience by reducing clicks and allowing immediate data entry. Autofocus should be used on the first or most important field in a form, like the search box on a search page or the username field on a login page. However, use autofocus sparingly because it can be disruptive for keyboard navigation users and screen reader users. Only one element per page should have autofocus. If multiple elements have it, the first one in the HTML receives focus. Autofocus is a boolean attribute that works with input, select, textarea, and button elements. It can negatively impact accessibility if overused, so consider whether automatic focus truly improves the user experience.

Example code

<!-- Search box with autofocus -->
<form action="/search" method="GET">
  <label for="search">Search:</label>
  <input type="text" 
         id="search" 
         name="q" 
         autofocus>
  <button type="submit">Search</button>
</form>
<!-- Cursor automatically appears in search box -->

<!-- Login form with autofocus on username -->
<form action="/login" method="POST">
  <label for="username">Username:</label>
  <input type="text" 
         id="username" 
         name="username" 
         autofocus 
         required>
  
  <label for="password">Password:</label>
  <input type="password" 
         id="password" 
         name="password" 
         required>
  
  <button type="submit">Login</button>
</form>

<!-- Modal dialog with autofocus -->
<dialog>
  <form method="dialog">
    <label for="confirm">Are you sure?</label>
    <button type="submit" value="yes" autofocus>Yes</button>
    <button type="submit" value="no">No</button>
  </form>
</dialog>

Master Interviews
Anywhere, Anytime

Forms - Part 3 (Validation & Attributes) – HTML interview questions

Set overview

HTML – Forms - Part 3 (Validation & Attributes) questions (13)

1. Which attribute makes a form field mandatory?

Continue your preparation

2. Which attribute uses regular expressions for validation?

3. What happens to a disabled input when the form is submitted?

4. What does autocomplete="off" do?

5. Explain HTML5 form validation with examples.

6. What's the difference between readonly and disabled attributes?

7. How does the pattern attribute work in form validation?

8. What does the formaction attribute on a submit button do?

9. What does the novalidate attribute on a form do?

10. Which attributes restrict the range of numeric inputs?

11. Which attribute limits the number of characters in an input?

12. What does the readonly attribute do?

13. What does the autofocus attribute do?

More sets in HTML

Explore related subjects

Master Interviews Anywhere, Anytime

Forms - Part 3 (Validation & Attributes) – HTML interview questions

Set overview

1. Which attribute makes a form field mandatory?

Continue your preparation

2. Which attribute uses regular expressions for validation?

3. What happens to a disabled input when the form is submitted?

4. What does autocomplete="off" do?

5. Explain HTML5 form validation with examples.

6. What's the difference between readonly and disabled attributes?

7. How does the pattern attribute work in form validation?

8. What does the formaction attribute on a submit button do?

9. What does the novalidate attribute on a form do?

10. Which attributes restrict the range of numeric inputs?

11. Which attribute limits the number of characters in an input?

12. What does the readonly attribute do?

13. What does the autofocus attribute do?

More sets in HTML

Explore related subjects

Master Interviews
Anywhere, Anytime