4Q LQ 1

• HTML Forms


  Form tags are a group of tags that accepts input from the users. A single form can contain multiple tags that accept different inputs. The <form> tag is used to group different form elements together.
• HTML Form tags


  1. form action="somepage.html">

  2. label for="username">Username: </label>

  3. input type="text" id="userName" name="userName">

  4. label for="password">Password: </label>

  5. input type = "password" id="pWord" name="password">

  6. input type = "submit" value = "Submit">

  7. input type = "button" value = "Click me!"
• Types of input tags


  • textfield
  • password
  • number
  • button
  • submit
  • reset
  • textarea
  • fieldset
  • legend
• Example form


  1. fieldset form="login">

  2. legend>Log-in Credentials: </legend>

  3. label for="userName">Username:</label>

  4. input type="text" id="userName" name="userName">

  5. label for="pword">Password:</label>

  6. input type="password" id="pword" name="pword">

  7. label for="comments">Comments: </label>

  8. textarea id="tArea" name="comments" rows="4" cols="50"> </textarea>

  9. input type="submit" value="Submit">

  10. input type="reset" value="Clear">
• Form attributes


  • autocomplete
  • disabled
  • novalidate
  • name
  • target
• Textarea


  Used for multi-line text input, allows users to enter multiple lines of text, commonly used for forms where users need to provide longer responses
• Textfield


  Refers to <input type="text">, creates a single-line text input field, used for short text input like names, email addresses, or search queries
• Button


  Not an input tag, but commonly used to create clickable buttons on a webpage, can be used to trigger JavaScript functions or submit forms
• Password


  Used for password input fields, behaves similarly to a text input field but hides the characters typed by the user, typically displaying asterisks or dots
• Submit


  Used to create a submit button within a form, when clicked, it submits the form data to the server for processing
• Fieldset


  Not an input tag, used to group related form elements together within a form, often paired with the <legend> tag
• Number


  Creates a numeric input field, restricts input to numeric values and provides controls like up/down arrows to increment or decrement the value
• Reset


  Creates a reset button within a form, when clicked, it resets all form fields to their default values
• Legend


  Used in combination with <fieldset> to provide a title or caption for the group of form elements within the fieldset
• Autocomplete


  Attribute that controls whether the browser should automatically complete input fields based on the user's previous input
• Name


  Attribute that specifies the name of the form, which is included with the form data when submitted
• Disabled


  Attribute that disables form elements, making them non-interactive
• Target


  Attribute that specifies where to display the response received after submitting the form
• Target attribute values


  • _self
  • _blank
  • _parent
  • _top
• Novalidate


  Boolean attribute that tells the browser not to perform validation of form data before submitting it to the server
• Radio buttons


  Used to give the user a list of related items where they can choose only one value at a time. The user can click on any item and when they click another item, the latest item clicked will be the chosen value.
• Checkboxes


  Like radio buttons where they present the user with a group of related choices and the chosen value is the input of the user for processing. Multiple choices can be selected.
• Select tag


  Used to give the user a list of choices in a dropdown layout. Like the radio button, you can set it so that only one option can be chosen at a time. But you can also set it to accept multiple options from the user by using the attribute multiple, and press on the ctrl or shift key when making several selections.
• Selected attribute


  On the opening <option> tag causes it to be pre-selected, much like the effect of the checked attribute for radio and checkboxes.