HTML: Forms, Inputs & Accessibility Flashcards
Form elements: , , , , Input types (text, email, number, date, etc.) Form validation (HTML5 attributes like required, pattern) Accessibility roles and attributes (ARIA) Interview-style Questions: How do you ensure a form is accessible? What are the pros and cons of client-side HTML validation? When would you use aria-hidden="true"? (21 cards)
What does the <form> element do in HTML?
The <form> element is used to collect user input and submit it to a server or handle it with JavaScript.
What are common HTML input elements?
<input></input>, <textarea>, <select>, and <label> are commonly used to gather various types of user input.</label></select></textarea>
What is the purpose of the <label> tag?</label>
<label> improves accessibility by associating text with a form control, allowing screen readers and users to interact more easily.</label>
What are HTML5 input types?
HTML5 includes types like text, email, number, date, checkbox, radio, file, and password for tailored data collection.
What is the use of the ‘required’ attribute?
It marks a field as mandatory, preventing form submission unless filled out.
What is the purpose of the ‘pattern’ attribute in input fields?
It defines a regular expression that the input value must match, useful for custom validation like phone numbers or postal codes.
What are the pros of HTML5 form validation?
It provides instant feedback, reduces server load, and improves user experience without JavaScript.
What are the cons of HTML5 form validation?
It’s not supported uniformly in all browsers and should not replace server-side validation for security.
How can you ensure a form is accessible?
Use <label> with ‘for’, associate controls correctly, use ARIA attributes when needed, and maintain a logical tab order.</label>
When would you use aria-hidden="true"?
To hide non-essential content from screen readers, such as decorative elements or duplicate visual cues.
What are ARIA roles and attributes?
ARIA (Accessible Rich Internet Applications) defines roles and attributes that help screen readers understand complex UIs.
What is a best practice for using <select> tags?</select>
Include a default option like ‘Please choose’ and ensure each <option> is descriptive and useful.</option>
What is a use case for <textarea>?</textarea>
<textarea> is used when the user needs to input multi-line text, such as comments or reviews.
</textarea>
What are the advantages of using semantic form elements?
They improve accessibility, maintainability, and enhance user experience across devices and assistive technologies.
What are the disadvantages of non-semantic form markup?
It reduces accessibility, causes confusion in screen readers, and increases development and maintenance costs.
What is a common mistake when using <label> and <input></input>?</label>
Not associating them properly using ‘for’ and ‘id’, which breaks accessibility.
What is the impact of accessible forms on system design?
They ensure inclusivity, compliance with accessibility standards, and reduce user friction across diverse user bases.
What is a real-world tradeoff with form validation?
Client-side validation improves speed and UX, but must be supplemented with server-side checks for security.
What are architectural implications of poor form design?
It can lead to inaccessible systems, inconsistent behavior, and higher technical debt during feature expansion or redesign.
How does form structure affect performance and fault tolerance?
Simpler, semantic forms reduce DOM complexity and potential user error, making the frontend more resilient and easier to debug.
What are common interview questions about forms and accessibility?
‘How do you make a form accessible?’, ‘What are input types in HTML?’, ‘Explain HTML5 form validation.’
