(Section 1 Section 2 Section 3 Section 4 Section 6 )
Boolean attributes
Boolean attributes don't require a value. Their presence on an element implies a "true" value, while their absence implies "false".
disabled: Renders a form element unusable and unclickable.
required: Specifies that a form element must be filled out before submitting.
checked: Indicates that a checkbox or radio button should be pre-selected on page load.
readonly: Specifies that an input field is read-only and cannot be modified.
Disabled attributes
The disabled attribute is a boolean HTML attribute that deactivates an element, making it unclickable and unresponsive to user interaction. It can be applied to elements like <button>, <input>, <select>, and <textarea> to prevent them from being focused, edited, or submitted with form data. When present, the element is typically styled differently (e.g., grayed out) to visually signal its inactive state.
Syntax:
<tag disabled></tag>
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML disabled Attribute</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">SGRCM DEGREE COLLEGE BALLARI</h1>
<h2>HTML disabled Attribute</h2>
<!--A disabled button-->
<button type="button" disabled>Click Me!</button>
</body>
</html>
Output
"Click Me!" button unclickable and visually indicating it is disabled.
required attributes
A required attribute is a characteristic or data field that must have a value for a record or form to be complete. In web development, the HTML required attribute, for example, prevents form submission until the user provides a value for a mandatory input field.
Purpose:
The required attribute is a boolean attribute used on form elements (like <input>, <select>, and <textarea>) to specify that the field must be filled out before the form can be submitted.
How it works:
When a user tries to submit a form with a blank required field, the browser will display a validation message prompting them to enter a value.
Supported Input Types:
It works with various input types, including text, email, number, checkbox, radio, and file.
Syntax
<input required>
Example
<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>
</body>
</html>
Output
checked attributes
The HTML checked attribute is a boolean attribute for <input> elements of type "checkbox" or "radio", specifying that the element should be pre-selected when a page loads. When present, it makes the checkbox or radio button appear checked, and it can also be controlled dynamically using JavaScript to toggle its state after the page has loaded.
How it works:
· Boolean Attribute:
The checked attribute is a boolean attribute, meaning its presence indicates "true" (the item is checked), and its absence indicates "false" (the item is unchecked).
· Initial State:
It sets the default or initial state of a checkbox or radio button when a user first views the page.
· Toggling:
Users can click the element to check or uncheck it, toggling its state.
Syntax
<input checked>
<input type = "checkbox|radio" checked>
Example
<!DOCTYPE html>
<html>
<body>
<h1>The input checked attribute</h1>
<form action="/action_page.php" method="get">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
Example to show radio button
<!DOCTYPE html>
<html>
<head>
<title>HTML checked Attribute</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML checked Attribute</h2>
<form>
<!-- Below input elements have attribute "checked" -->
<input type="radio"
name="check"
value="1" checked>
Selected by default<br>
<input type="radio"
name="check"
value="2">
Not selected by default<br>
</form>
</body>
</html>
Output
readonly attributes
The readonly attribute is a boolean attribute.
When present, it specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.
Note: A form will still submit an input field that is readonly, but will not submit an input field that is disabled!
SYNTAX
1<title>readonly attribute</title>
2 <form>
<label>Name:</label>
<input type="text" value="John Doe" readonly>
</form>
Example
<!DOCTYPE html>
<html>
<head>
<title>readonly attribute</title>
</head>
<body>
<h1>SGRCM DEGREE COLLEGE BALLARI</h1>
<h2>
readonly attribute in Input Element
</h2>
<form action="">
Email:
<input type="text" name="email" />
<br />
Country:
<input type="text"
name="country"
value="Noida" readonly />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
No comments:
Post a Comment