Day 1 - Form Elements

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:

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:

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:

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:

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:

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: