Multiple-Line Text Input Controls
Multiple-line text input controls in HTML are used when you want users to input longer text entries that span across multiple lines. Here are the common ways to create multiple-line text input controls:1. Textarea: The `<textarea>` element is used to create a text input area where users can input multiple lines of text. It's useful for longer text entries such as comments, descriptions, or messages.
<textarea name="message" rows="4" cols="50"></textarea>
Attributes commonly used with `<textarea>`:
- name: Specifies the name of the input field, which is used to identify the field's value when the form is submitted.
- rows: Specifies the visible number of lines in the textarea.
- cols: Specifies the visible number of characters per line in the textarea.
2. Content Editabl: The `contenteditable` attribute can be applied to any HTML element (e.g., `<div>`, `<span>`) to make it editable by the user. While it's not specifically designed for form input, it can be used to create custom multi-line text input controls.
<div contenteditable="true" style="width: 300px; height: 100px; border: 1px solid #ccc;"></div>
With JavaScript, you can retrieve the edited content and include it in your form submission.
These are the primary methods for creating multiple-line text input controls in HTML. The `<textarea>` element is the standard approach for this purpose, while `contenteditable` provides a more flexible but less form-centric method.
Attributes
Certainly! Here are some common attributes that can be used with `<textarea>` elements and `contenteditable` attribute to create multiple-line text input controls in HTML:
`<textarea>` Attributes:
1. **name**: Specifies the name of the input field, which is used to identify the field's value when the form is submitted.
<textarea name="message"></textarea>
2. **rows**: Specifies the visible number of lines in the textarea.
<textarea name="message" rows="4"></textarea>
3. **cols**: Specifies the visible number of characters per line in the textarea.
<textarea name="message" cols="50"></textarea>
4. **maxlength**: Specifies the maximum number of characters that can be entered into the textarea.
<textarea name="message" maxlength="500"></textarea>
5. **placeholder**: Provides a hint to the user about what kind of information is expected in the textarea.
<textarea name="message" placeholder="Enter your message"></textarea>
6. **readonly**: Specifies that the textarea is read-only and cannot be edited by the user.
<textarea name="message" readonly></textarea>
7. **disabled**: Specifies that the textarea is disabled and cannot be interacted with by the user.
<textarea name="message" disabled></textarea>
`contenteditable` Attribute:
1. **contenteditable**: Specifies whether the element's content can be edited by the user. It can be set to "true" or "false".
<div contenteditable="true">Editable content here</div>
2. **style**: Allows you to apply CSS styles to the element to control its appearance and behavior.
<div contenteditable="true" style="width: 300px; height: 100px; border: 1px solid #ccc;">Editable content here</div>
3. **data-* Attributes**: You can also use custom data attributes to store additional information.
<div contenteditable="true" data-custom="value">Editable content here</div>
These attributes can be used to customize the behavior, appearance, and functionality of multiple-line text input controls in HTML.
Checkbox Control
The checkbox control in HTML is used when you want users to select one or more options from a list of choices. Each checkbox represents a single option, and users can select multiple checkboxes if needed. Here's how you can create checkbox controls:```html
<input type="checkbox" name="option1" id="option1" value="value1">
<label for="option1">Option 1</label>
<input type="checkbox" name="option2" id="option2" value="value2">
<label for="option2">Option 2</label>
<input type="checkbox" name="option3" id="option3" value="value3">
<label for="option3">Option 3</label>
Attributes commonly used with checkbox controls:
1. **type**: Specifies the type of input field, which is "checkbox" for checkboxes.
2. **name**: Specifies the name of the input field, which is used to identify the field's value(s) when the form is submitted. It's important to give each checkbox a unique name if you want to process the selections individually.
3. **id**: Specifies a unique identifier for the input field, which can be used for associating labels with checkboxes.
4. **value**: Specifies the value that gets submitted to the server when the checkbox is selected and the form is submitted. If not provided, a default value of "on" is used.
5. **checked**: Specifies that the checkbox is initially selected. This attribute is added to the checkbox input element if you want it to be pre-selected by default.
6. **disabled**: Specifies that the checkbox is disabled and cannot be interacted with by the user.
7. **label**: A `<label>` element associated with the checkbox using the `for` attribute. This improves accessibility and usability by allowing users to click the label text to select the checkbox.
You can use JavaScript to handle checkbox behavior dynamically, such as checking/unchecking checkboxes based on user actions or validating checkbox selections before form submission.
Attributes
Following is the list of attributes for <checkbox> tag.| Sr.No | Attribute & Description |
|---|---|
| 1 | type Indicates the type of input control and for checkbox input control it will be set to checkbox.. |
| 2 | name Used to give a name to the control which is sent to the server to be recognized and get the value. |
| 3 | value The value that will be used if the checkbox is selected. |
| 4 | checked Set to checked if you want to select it by default. |
Radio Button Control
The radio button control in HTML is used when you want users to select only one option from a list of choices. Unlike checkboxes, where multiple selections are allowed, radio buttons are mutually exclusive — selecting one option automatically deselects any other options within the same group. Here's how you can create radio button controls:<input type="radio" id="option1" name="options" value="value1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="value2">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="options" value="value3">
<label for="option3">Option 3</label>
Attributes commonly used with radio button controls:
1. **type**: Specifies the type of input field, which is "radio" for radio buttons.
2. **id**: Specifies a unique identifier for the input field, which can be used for associating labels with radio buttons.
3. **name**: Specifies the name of the input field, which groups the radio buttons together. Radio buttons with the same name belong to the same group, and only one radio button in the group can be selected at a time.
4. **value**: Specifies the value that gets submitted to the server when the radio button is selected and the form is submitted.
5. **checked**: Specifies that the radio button is initially selected. Only one radio button in the group should have the `checked` attribute.
6. **disabled**: Specifies that the radio button is disabled and cannot be interacted with by the user.
7. **label**: A `<label>` element associated with the radio button using the `for` attribute. This improves accessibility and usability by allowing users to click the label text to select the radio button.
Radio buttons are commonly used in situations where users need to make a single choice from a set of options, such as selecting a gender or choosing a payment method. They ensure that users can only select one option, providing a clear and intuitive interface for decision-making.
Last edited by a moderator: