HTML Forms: Textbox MCQs Quiz | Class 10

This quiz is designed for Class X students studying Computer Applications (Code 165), specifically covering Unit 2: HTML. The topic focuses on HTML Forms: Textbox MCQs Quiz, with a deep dive into the <input type="text"> field. Test your knowledge, submit your answers, and download a detailed PDF answer sheet for review.

Understanding HTML Textbox (`<input type=”text”>`)

HTML forms are essential for collecting user input on websites. Among the various input types, the <input type="text"> element is one of the most fundamental. It creates a single-line text input field, ideal for capturing short pieces of information like names, email addresses, search queries, or any single-line textual data.

Key Concepts and Attributes of `<input type=”text”>`

The functionality and behavior of a textbox can be greatly enhanced using various HTML attributes. Understanding these attributes is crucial for creating effective and user-friendly forms.

  • type="text": This is the defining attribute that specifies the input field should accept single-line text.
  • name: This attribute is crucial for submitting data. It assigns a name to the input field, which is used to identify the data when the form is submitted to a server. For example, name="username".
  • id: The id attribute provides a unique identifier for the input field. It’s often used by JavaScript to manipulate the element, or by a <label> element to associate a label with the input field (using <label for="elementId">).
  • value: This attribute sets the initial (default) value of the input field. The user can then change this value.
  • placeholder: Provides a short hint that describes the expected value of an input field when it has no value. This text is displayed in the input field until the user types something.
  • maxlength: Specifies the maximum number of characters (not bytes) that the user can enter into the text input.
  • size: Specifies the visible width of the text input in characters. Note that this is a visual suggestion and does not prevent the user from typing more characters than `size` implies, unless `maxlength` is also set.
  • required: A boolean attribute. If present, it specifies that the input field must be filled out before submitting the form.
  • readonly: A boolean attribute. If present, it specifies that the input field is read-only. The value cannot be changed by the user, but it will still be submitted with the form.
  • disabled: A boolean attribute. If present, it specifies that the input field should be disabled. A disabled input field is unusable and un-clickable, and its value will not be submitted with the form.

Summary of Key Attributes for `<input type=”text”>`

Attribute Description Example
name Identifies data when submitted <input type="text" name="fname">
id Unique identifier, used with <label for> <input type="text" id="username">
value Default pre-filled text <input type="text" value="John Doe">
placeholder Hint text in empty field <input type="text" placeholder="Enter your name">
maxlength Maximum allowed characters <input type="text" maxlength="50">
required Field must be filled before submission <input type="text" required>
readonly User cannot change value, but it submits <input type="text" value="Fixed text" readonly>
disabled Field is unusable, value not submitted <input type="text" disabled>

Quick Revision Points

  • <input type="text"> creates a single-line text box.
  • The name attribute is crucial for server-side processing.
  • The id attribute links labels to inputs and is used by scripts.
  • placeholder gives a hint, value provides a default entry.
  • maxlength controls character limit, size controls visible width.
  • required enforces field completion, readonly prevents user edits but allows submission.
  • disabled completely deactivates the input, preventing submission.
  • Always associate text inputs with <label> elements for accessibility.

Practice Questions

Test your understanding further with these questions:

  1. What is the primary function of the name attribute in an <input type="text"> tag?
  2. Which attribute would you use to display the text “Enter your email” inside an empty text field?
  3. Explain the difference between the readonly and disabled attributes for a text input.
  4. How can you ensure that a user must provide their name in a text field before submitting the form?
  5. If you want a text field to visibly show 20 characters, but allow the user to type up to 100 characters, which two attributes would you use and how?

Author

  • CBSE Quiz Editorial Team

    Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.