HTML Forms: Interview Questions and Answers

Forms are a common interview topic because small markup decisions affect usability, accessibility, and whether submitted data reaches the server.

1. What is the difference between id and name on a form control?#

id identifies an element in the document. It connects a label through for, can be used by scripts, and can be a CSS target. name identifies the field in the submitted form data. A control can have an ID without a name, but it will not normally contribute a named value to form submission unless another mechanism provides it.

2. Why should every input have a label?#

A label gives the control a readable name and a larger click or tap target. The explicit pattern is <label for="email">Email address</label><input id="email" name="email">. A label can also wrap its control. Placeholder text is not a replacement: it can disappear while typing and often has weaker contrast.

3. What is the difference between radio buttons and checkboxes?#

Radio buttons represent one choice from a group. Give related radio controls the same name so the browser treats them as one group. Checkboxes represent independent on/off choices, so several can be selected. Use a fieldset and legend when a group needs a shared question or description.

4. What are GET and POST methods used for in forms?#

GET requests a resource and commonly places form values in the URL query string. It is appropriate for searches and filters that should be bookmarkable or shareable. POST sends the form data in the request body and is commonly used for operations that submit or change data. Neither method encrypts data; use HTTPS for transport security, and do not put passwords or sensitive values in a GET URL.

5. What does the required attribute do?#

It enables a browser constraint that prevents normal form submission when the control has no value. Some input types also have built-in checks, such as a basic email-format check for type="email". This improves the user experience but is not a security boundary. The server must validate submitted data again.

6. What is the difference between disabled and readonly?#

A disabled control cannot normally be focused or edited and is not included in form submission. A readonly control can still be focused and its value is submitted, but the user cannot edit it. Readonly applies to certain controls, such as text inputs and textareas, not every form control.

7. When is enctype="multipart/form-data" required?#

Use it when a form uploads files with input type="file" using a POST request. Without the correct encoding, file contents will not be transmitted as expected. The server still needs to check file type, size, content, authorization, and storage rules; an accept attribute is only a hint to the file picker.

8. What is the difference between client-side and server-side validation?#

Client-side validation gives users quicker feedback and helps prevent accidental mistakes. It can be performed by built-in HTML constraints or JavaScript. Server-side validation is essential because clients can be modified or bypassed. The server must validate types, lengths, allowed values, permissions, and business rules before trusting data.

9. Why should related controls use fieldset and legend?#

fieldset groups related controls and legend names the group. For example, a group of delivery options can have a legend of “Choose a delivery method”. This provides context that individual labels do not repeat and can make forms easier to understand with assistive technology.

10. What is the purpose of the autocomplete attribute?#

It communicates the kind of information a control expects, such as name, email, street-address, or current-password. Browsers and password managers can use it to offer appropriate autofill. Use correct tokens rather than disabling autofill without a strong reason.