HTML Input Field and Forms

HTML Form

• HTML Forms use the <form> tag to collect user input through various interactive controls. These controls range from text fields, numeric inputs, and email fields to password fields, checkboxes, radio buttons, and submit buttons.

• The HTML <form> has several elements, each with a unique purpose. For instance, the <label> element defines labels for other <form> elements. On the other hand, the <input> element can be used to capture various types of input data such as text, password, email, and more simply by altering its type attribute.

<h2>HTML Forms</h2>
    <form>
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br><br>

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

        <input type="submit" value="Submit">
    </form>

HTML Input tag

• The HTML <input> tag specifies the input field where the user can enter data. It is the most important tag in the form element. This can be displayed in several ways depending on the type attribute, such as text, password, email, checkbox, radio, number, and more.

• To define a label for the input element, we use the <label> tag, whereas the input tag is an empty element that only has a type attribute.

Syntax

<h3>Input and Label tag</h3>
<!--Button label and input-->
<label for="">Button</label>
<input type="button" value="Button" /> <br />
<!--Checkbox label and input-->
<label for="">Checkbox</label>
<input type="checkbox" name="" id="" /><br />
<!--Color label and input-->
<label for="">Color</label>
<input type="color" name="" id="" /><br />
<!--Date label and input-->
<label for="">Date</label>
<input type="date" name="" id="" /><br />
<!--Date Time label and input-->
<label for="">Date Time</label>
<input type="datetime" name="" id="" /><br />
<!--Date Time Location label and input-->
<label for="">Date Time Location</label>
<input type="datetime-local" name="" id="" /><br />
<!--Email label and input-->
<label for="">Email</label>
<input type="email" name="" id="" /><br />
<!--File label and input-->
<label for="">File</label>
<input type="file" name="" id="" /><br />
<!--Hidden label and input-->
<label for="">Hidden</label>
<input type="hidden" name="" /><br />
<!--Image label and input-->
<label for="">Image</label>
<input type="image" src="#" alt="Pic" /><br />
<!--Month label and input-->
<label for="">Month</label>
<input type="month" name="" id="" /><br />
<!--Number label and input-->
<label for="">Number</label>
<input type="number" name="" id="" /><br />
<!--Password label and input-->
<label for="">Password</label>
<input type="password" name="" id="" /><br />
<!--Radio label and input-->
<label for="">Radio</label>
<input type="radio" name="" id="" /><br />
<!--Range label and input-->
<label for="">Range</label>
<input type="range" name="" id="" /><br />
<!--Reset label and input-->
<label for="">Reset</label>
<input type="reset" value="Reset" /><br />
<!--Search label and input-->
<label for="">Search</label>
<input type="search" name="" id="" /><br />
<!--Submit label and input-->
<label for="">Submit</label>
<input type="submit" value="Submit" /><br />
<!--Tel label and input-->
<label for="">Tel</label>
<input type="tel" name="" id="" /><br />
<!--Text label and input-->
<label for="">Text</label>
<input type="text" name="" id="" /><br />
<!--Time label and input-->
<label for="">Time</label>
<input type="time" name="" id="" /><br />
<!--URL label and input-->
<label for="">URL</label>
<input type="url" name="" id="" /><br />
<!--Week label and input-->
<label for="">Week</label>
<input type="week" name="" id="" />

HTML form tag

• The HTML form tag is used to create a form on a web page. It serves as a container for various input elements like numbers, checkboxes, buttons, and more, which collect data and send it to the server via client-side script.

• In the form tag we have some common form element. They are <input>,<button>,<select>,<textarea>,<label>,<fieldset>,<legend>,<datalist>.

Input & Label

This input tag is explained in the information above.

Button

• This button tag is used to create a clickable button on the webpage. It can submit the form by triggering a JavaScript function.

• This button tag has type attributes such as button, disabled, reset, and submit.

<button type="button">Button btn!</button> <br><br>
<button disabled="disabled">Disabled btn!</button> <br><br>
<button type="reset">Reset btn!</button> <br><br>
<button type="submit">Submit btn!</button> <br><br>

Select

• This HTML select tag is used to create a dropdown list for user input, containing option tags to display the available choices.

<select>
  <option value="car">Car</option>
  <option value="auto">Auto</option>
  <option value="bike">Bike</option>
  <option value="computr">Computer</option>
  <option value="keyboard">Keyboard</option>
  <option value="tv">Television</option>
  <option value="remote">Remote</option>
  <option value="tomato">Tomato</option>
  <option value="bag">Bag</option>
  <option value="cell">Cell</option>
</select>

Textarea

• The HTML textarea tag is used to create a multi-line text editor control. It is commonly used in forms to collect user input such as comments, reviews, or any other text entry. Attributes like cols and rows define the size of the textarea.

<label for="cmnt">Comments</label> <br>
<textarea name="cmnt" id="cmnt" placeholder="Enter your comments" rows="10" cols="30"></textarea>

Fieldset & Legend

• The fieldset tag is used to group related elements in the form tag. It looks like a border around the form, and we often use the legend tag to provide a caption or title to the group of fields.

<form action="#">
    <fieldset style="width: 10%;">
      <legend>Login Form</legend>
      <label for="">Name:</label> <br>
      <input type="text" name="" id=""> <br><br>
      <label for="pass">Password:</label> <br>
      <input type="password" name="" id="">
    </fieldset>
  </form>

Datalist

• The <datalist> tag is used to provide autocomplete in the HTML files. It contains a list of predefined options that the user can select from, making it easier to enter data. The <datalist> tag is often used in conjunction with an <input> element of type “text” or “search”.

<form action="">
  <label>Your Cars Name: </label>
  <input list="cars">
 <datalist id="cars">
   <option value="BMW" />
   <option value="Bentley" />
   <option value="Mercedes" />
   <option value="Audi" />
   <option value="Volkswagen" />
 </datalist>
</form>

---

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥