HTML part 3

Table of Contents

• Label
• Button
• select
• Option
• Textarea

Label:

• It is used to tell the user what to enter in the input box.
• It is best to connect label with input using for and id.
• When the user click on the label, input gets focused.

Example :

<form>
    <label for="email">Email:</label>
    <input type="email" id="email"><br><br>

    <label for="password">Password:</label>
    <input type="password" id="password">
</form>

Button:

• It is used to perform an action when clicked like submitting form and resetting form.

Types of button:

• button
• submit
• reset

*Example : *

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

select:

• It is used to create drop down list.
• It allows users to choose one or more options.

Example :

<label for="city">Choose City:</label>
<select id="city">
    <option>Chennai</option>
    <option>Delhi</option>
    <option>Mumbai</option>
</select>


<select name="city">
    <option value="chn">Chennai</option>
    <option value="del">Delhi</option>
</select>

Here the value is what gets sent to server.

For Multiple Selection :

<select multiple>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

Option:

It is used to define items inside a dropdown.
It can have value attribute.
We can mention default selected option.
We can disable a option.

Example :

<select>
    <option value="">Select Course</option>
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js" disabled>JavaScript</option>
</select>

Textarea:

• It is used to take multline input from user.

Example :

<form>
    <label for="feedback">Feedback:</label><br>

    <textarea id="feedback" name="feedback" rows="5" cols="30"
        placeholder="Enter your feedback here"></textarea><br><br>

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