HTML - Forms Input - Set 1

HTML forms are used to collect and submit user input. They allow users to enter data, make selections, and interact with a web page. Let's explore the components and attributes of HTML forms in detail:

Text Input (<input type="text">):

Meaning: The text input allows users to enter single-line text.

Usage: Use the <input type="text"> tag to create a text input field.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
</form>

Password Input (<input type="password">):

Meaning: The password input hides the user's input as they type, commonly used for sensitive information like passwords.

Usage: Use the <input type="password"> tag to create a password input field.

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

Submit Button (<input type="submit">):

Meaning: The submit button submits the form data to the server for processing.

Usage: Use the <input type="submit"> tag to create a submit button.

<form>
  <!-- Form fields go here -->
  <input type="submit" value="Submit">
</form>

Reset Button (<input type="reset">):

Meaning: The reset button resets the form fields to their initial values.

Usage: Use the <input type="reset"> tag to create a reset button.

<form>
  <!-- Form fields go here -->
  <input type="reset" value="Reset">
</form>

Radio Buttons (<input type="radio">):

Meaning: Radio buttons allow users to select a single option from a set of mutually exclusive options.

Usage: Use the <input type="radio"> tag to create radio buttons. Each radio button must have a unique name attribute and a corresponding value attribute.

<form>
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">Option 3</label><br>
</form>