🧪 HTML Form Elements — Practice Lab

🔘 Buttons

HTML

Buttons allow users to trigger actions. HTML provides two ways to create buttons.

The <button> Element

The most versatile way to create a button. Can contain text, icons, or even images.

<button type="button">Click Me</button>
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

Button Types

• type="button" — generic clickable button (no form action)
• type="submit" — submits the form data
• type="reset" — resets all form fields to default

The <input> Button

An alternative using the <input> element with type set to button, submit, or reset.

<input type="button" value="Click Me">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Styling Buttons with CSS

Buttons can be styled with background-color, color, border-radius, padding, and cursor: pointer.

button {
    background-color: #6c63ff;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background-color: #5a52d5;
}

☑️ Checkboxes (Tick Boxes)

HTML

Checkboxes allow users to select one or more options from a set.

Basic Syntax

<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>

Key Attributes

• type="checkbox" — creates the tick box
• id — links to the <label> via for
• name — identifies the field in form submissions
• value — the value sent when checked
• checked — pre-selects the checkbox

Grouping Checkboxes

Multiple checkboxes can share the same name to form a group. Each should have a unique value.

<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="gaming"> Gaming</label>
<label><input type="checkbox" name="hobby" value="cooking"> Cooking</label>

Why Use <label>?

Wrapping a checkbox with a <label> or using the for attribute improves accessibility and makes the text clickable too.

📋 HTML Lists

HTML

Lists organize content into structured groups. HTML supports three types.

Ordered List (<ol>)

Creates a numbered list. Each item uses <li>.

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Unordered List (<ul>)

Creates a bulleted list.

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

Description List (<dl>)

Used for term-definition pairs with <dt> (term) and <dd> (definition).

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

Lists can be nested inside other lists to create hierarchical structures.

💬 Message Boxes (Alert Boxes)

CSS

Message boxes are styled containers that display informational, success, warning, or error messages to users.

Basic Structure

<div class="message success">
    ✅ Operation completed successfully!
</div>
<div class="message error">
    ❌ Something went wrong. Please try again.
</div>

CSS for Message Boxes

.message {
    padding: 14px 20px;
    border-radius: 8px;
    margin: 10px 0;
    font-weight: 600;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}
.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

JavaScript Alert Boxes

JavaScript provides built-in dialog boxes:

• alert("message") — shows a message with OK button
• confirm("question") — shows OK/Cancel, returns true/false
• prompt("question") — shows a text input, returns the entered value

🧩 Combining Form Elements

HTML5

Real-world forms combine buttons, checkboxes, lists, and feedback messages together.

The <form> Element

Wraps all form controls together for submission.

<form action="/submit" method="POST">
    <!-- form fields go here -->
    <button type="submit">Submit</button>
</form>

Best Practices

• Always use <label> for each input for accessibility
• Group related checkboxes with <fieldset> and <legend>
• Provide visual feedback (message boxes) after user actions
• Use :hover and :active pseudo-classes for interactive buttons