Day 1 - Form Elements

This guide demonstrates common Form elements with their code and actual output.

1. Text Input

Standard text inputs for names, emails, and passwords.

Code:

            <label for="fname">First name:</label>

            <input type="text" id="fname" name="fname"><br>

            <label for="lname">Last name:</label>

            <input type="text" id="lname" name="lname"><br>

            <label for="email">Email:</label>

            <input type="email"
            placeholder="juandelacruz@gmail.com"><br>

            <label for="password">Password:</label>

            <input type="password" placeholder="password">

Output:

First name:
Last name:
Email:
Password:

2. Select Dropdown

Allows users to select one option from a list.

Code:

            <label for="careers">Where did you find us:</label>

            <select name="careers" id="careers">

                <option
            value="indeed">Indeed</option>

                <option
            value="jobstreet">Jobstreet</option>

                <option
            value="facebook">Facebook</option>

                <option
            value="youtube">Youtube</option>

            </select>
          

Output:

Where did you find us:

3. Radio Buttons

Select only one option from a group (sharing the same name).

Code:

            <p>Select your skills</p>

            <input type="radio" id="html" name="fav_language"
            value="HTML">

            <label for="html">HTML</label><br>

            <input type="radio" id="css" name="fav_language"
            value="CSS">

            <label for="css">CSS</label><br>

            <input type="radio" id="javascript" name="fav_language"
            value="JavaScript">

            <label for="javascript">JavaScript</label>

Output:

Select your skills

HTML
CSS
JavaScript

4. Textarea

For multi-line text input, like reviews or comments.

Code:

            <label for="review">Please write your review
            here:</label><br>

            <textarea name="review" id="review" rows="5"
            cols="50"></textarea>
          

Output:

Please write your review here:

5. Checkboxes

Select multiple options (sharing the same name is optional but good practice).

Code:

            <p>

                Lorem ipsum dolor sit amet consectetur
            adipisicing elit.<br>

                Ullam, nesciunt.

            </p>

            <input type="checkbox" id="agree" name="permission"
            value="agree">

            <label for="agree">I agree</label>

            <input type="checkbox" id="disagree" name="permission"
            value="disagree">

            <label for="disagree">I disagree</label>

Output:

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam, nesciunt.

I agree I disagree

6. Form Attributes & Buttons

Examples of autofocus, disabled attributes, and buttons to submit or clear (reset) the form.

Code:

            <!-- Autofocus focuses the input on page load -->

            <label for="promo">Promo Code:</label>

            <input type="text" id="promo" name="promo"
            autofocus><br><br>

            <!-- Disabled makes the input uneditable -->

            <label for="username">Username (Disabled):</label>

            <input type="text" id="username" name="username" value="admin"
            disabled><br><br>

            <!-- Submit and Reset Buttons -->

            <button type="submit">Submit</button>

            <button type="reset">Clear</button>

Output:

Promo Code:

Username (Disabled):

< Previous: Semantic Elements | Next: Home >