HTML 파트 3

Source: Dev.to

Label

A “ tells the user what to enter in an input box.
It is best to connect the label with the input using for and id. When the user clicks the label, the associated input receives focus.

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

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

Button

A “ performs an action when clicked, such as submitting or resetting a form.

Types

• Default button – Click Me
• Button with explicit type – Normal
• Submit button – Submit
• Reset button – Reset

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

Select (Dropdown)

A “ creates a drop‑down list that allows users to choose one or more options.

Single selection

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

You can also provide explicit values that are sent to the server:

<select name="city">
  <option value="chennai">Chennai</option>
  <option value="delhi">Delhi</option>
</select>

Multiple selection

<select name="skills" multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Option

defines the items inside a. You can set a default selection, disable an option, or leave the value empty.

<select name="course">
  <option selected>Select Course</option>
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
</select>

Textarea

A “ allows multiline input from the user.

<label for="feedback">Feedback:</label>
<textarea id="feedback" name="feedback"></textarea>

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