September 06, 2024

HTML Forms

What is the use of Forms?


  • Forms are used to collect user information, such as name, email, contact information, etc.
  • The HTML <form> element can contain one or more of the form elements, like


<input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, <optgroup>


  • In these elements, the <input> element is one of the most important elements.


How to create a Form?


  • You start with the <form> tag. Inside this tag, you put all the things (like text boxes and buttons) that users can fill out or click.


    <form>
        <input type="text" placeholder="Enter your name here...">
        <input type="password" placeholder="Enter your password here...">
        <input type="submit">
    </form>


Form Elements


<input> 


  • The <input> element can be displayed in several ways, depending on the type attribute.
  • Input type should be text, number, email, password, date, etc.
  • Here are the different input types you can use in HTML:


<input type="button">

  • What it does: Creates a button that you can click, but it doesn’t do anything by itself. You can add JavaScript to make it do something.
  • Example: 


   <input type="button" value="Click Me">


<input type="checkbox">

  • What it does: Creates a small box that users can check or uncheck.
  • Example: 


    <input type="checkbox"> Subscribe to newsletter


<input type="color">

  • What it does: Opens a color picker where users can choose a color.
  • Example: 


    <input type="color">


<input type="date">

  • What it does: Opens a calendar for users to pick a date.
  • Example:


    <input type="date">


<input type="datetime-local">

  • What it does: users pick both a date and time (without time zone).
  • Example: 


    <input type="datetime-local"> 


<input type="email">


  • What it does: A text box for users to enter an email address. It checks if the input looks like an email (e.g., it has "@" and a domain).
  • Example: 


    <input type="email">


<input type="file">

  • What it does: Allows users to select a file from their computer to upload.
  • Example:


    <input type="file">


<input type="hidden">

  • What it does: A hidden field that users don’t see. It's used to store data that you want to send when the form is submitted.
  • Example: 


    <input type="hidden" value="secret">


<input type="image">

  • What it does: Displays an image that works like a submit button. When clicked, it submits the form.
  • Example: 


    <input type="image" src="submit.png">


<input type="month">

  • What it does: Allows users to pick a month and year.
  • Example: 


    <input type="month">   


<input type="number">

  • What it does: Creates a box where users can enter a number. You can set minimum and maximum values.
  • Example: 


    <input type="number" min="1" max="10">


<input type="password">

  • What it does: A text box where users can enter a password. The text is hidden as they type.
  • Example: 

    

	<input type="password">


<input type="radio">

  • What it does: Creates a small circle that users can select. Only one radio button in a group can be selected at a time.
  • Example: 


    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="radio" name="gender" value="other"> Other


<input type="range">

  • What it does: Creates a slider that users can drag to select a number within a range.
  • Example: 


    <input type="range" min="0" max="100">


<input type="reset">

  • What it does: Creates a button that resets the form to its initial values.
  • Example: 


    <input type="reset" value="Reset">


<input type="search">

  • What it does: A text box designed for search input, with special styling and a clear button (in some browsers).
  • Example: 


    <input type="search" placeholder="Search...">


<input type="submit">

  • What it does: A button that submits the form when clicked.
  • Example: 


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


<input type="tel">

  • What it does: A text box for entering a phone number. It may help with formatting and validation.
  • Example:


    <input type="tel" placeholder="123-456-7890">


<input type="text">

  • What it does: A simple text box where users can enter any kind of text.
  • Example: 


    <input type="text" placeholder="Enter your name">


<input type="time">

  • What it does: Allows users to select a time (hours and minutes).
  • Example:


    <input type="time">


<input type="url">

  • What it does: A text box for entering a website address (URL). It checks if the input looks like a valid URL.
  • Example: 


    <input type="url" placeholder="https://example.com">


<input type="week">

  • What it does: Allows users to select a specific week of the year.
  • Example: 


    <input type="week">   



<label>


  • What it does: A <label> is used to describe or name an input element like a text box or a checkbox. It makes forms more accessible, as clicking on the label will also select or focus on the associated input.
  • How to use it: You can link a <label> to an input by using the for attribute, which should match the input's id.
  • Example: 


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


<select>

  • What it does: A <select> creates a dropdown list, where users can choose one option from a list.
  • How to use it: Inside the <select> tag, you use <option> tags to define the items in the dropdown.
  • Example:


        <label for="fruits">Choose a fruit:</label>
        <select id="fruits">
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="orange">Orange</option>
        </select>


<textarea>

  • What it does: A <textarea> creates a large text box where users can type multiple lines of text, like a comment or message.
  • How to use it: You can specify the size of the <textarea> by setting the rows and cols attributes.
  • Example:


        <label for="message">Your Message:</label>
        <textarea id="message" rows="4" cols="50"></textarea>


<button>

  • What it does: A <button> creates a clickable button on a web page. It can be used to submit forms, reset forms, or trigger JavaScript functions.
  • How to use it: You can set the button's type to submit, reset, or button depending on its purpose.
  • Example:

       

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


<fieldset>


  • What it does: A <fieldset> is used to group related elements in a form, making it easier for users to understand which inputs belong together.
  • How to use it: You place related form elements inside the <fieldset> tag.
  • Example:

      

	  <fieldset>
             <h2>Personal Information</h2>
            <label for="fname">First Name:</label>
            <input type="text" id="fname"><br>
            <label for="lname">Last Name:</label>
            <input type="text" id="lname">
      </fieldset>


<legend>


  • What it does: A <legend> provides a caption or title for a <fieldset>, helping to describe what the grouped elements are about.
  • How to use it: The <legend> tag should be the first element inside a <fieldset>.
  • Example:

          

	     <fieldset>
            <legend>Contact Information</legend>
            <label for="email">Email:</label>
            <input type="email" id="email"><br>
            <label for="phone">Phone:</label>
            <input type="tel" id="phone">
          </fieldset>


<datalist>


  • What it does: A <datalist> provides a list of predefined options that users can choose from when typing in an <input> field. It’s like a combination of a dropdown and an autocomplete feature.
  • How to use it: You link the <datalist> to an <input> by using the list attribute on the input.
  • Example:


        <label for="browsers">Choose a browser:</label>
        <input list="browsers" id="browser">
        <datalist id="browsers">
            <option value="Chrome">
            <option value="Firefox">
            <option value="Safari">
        </datalist>


<option>


  • What it does: An <option> defines an item in a <select> dropdown list or a <datalist>.
  • How to use it: Place the <option> tags inside a <select> or <datalist>.
  • Example:


        <select>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>


<optgroup>


  • What it does: The <optgroup> groups related options in a dropdown list, making it easier for users to find similar options.
  • How to use it: Place the <optgroup> inside a <select>, and then place <option> tags inside the <optgroup>.
  • Example:

        

	  <select>
            <optgroup label="Fruits">
                <option value="apple">Apple</option>
                <option value="banana">Banana</option>
            </optgroup>
            <optgroup label="Vegetables">
                <option value="carrot">Carrot</option>
                <option value="broccoli">Broccoli</option>
            </optgroup>
        </select>


Input Attributes

type

  • What it does: Specifies the type of input element to display, such as text, password, email, etc.
  • Example:

	 <input type="text" name="username">  

     

name

  • What it does: Specifies the name of the input field. The name attribute is used to reference form data after a form is submitted.
  • Example:


        <input type="email" name="userEmail">


  • The data entered in this field will be sent to the server with the key userEmail.


value


  • What it does: Specifies the initial value of the input field.
  • Example:


        <input type="text" name="username" value="Sulok">


  • This input field will be pre-filled with the text "Sulok." as follows.


placeholder


  • What it does: Displays a short hint inside the input field that describes the expected value.
  • Example:


 <input type="text" name="username" placeholder="Enter your username">


  • The text "Enter your username" will appear inside the input field until the user starts typing.


required


  • What it does: Makes the input field mandatory. The form will not be submitted if this field is left empty.
  • Example:


        <input type="email" name="userEmail" required>
        <input type="submit" value="submit">


  • The user must fill in this email field before submitting the form.


readonly


  • What it does: Makes the input field read-only. Users cannot change the content, but it will be submitted with the form.
  • Example:


        <input type="text" name="username" value="Sulok" readonly>


  • The user can see "Sulok" but cannot edit it.


disabled


  • What it does: Disables the input field, making it uneditable and unsubmittable. The value will not be sent with the form data.
  • Example:


        <input type="text" name="username" value="JohnDoe" disabled>


  •  The input field is greyed out and cannot be interacted with.


maxlength


  • What it does: Specifies the maximum number of characters allowed in the input field.
  • Example:


        <input type="text" name="username" maxlength="10">


  • Users can only enter up to 10 characters in this field.


min and max


  • What it does: Define the minimum and maximum values for input types like number, date, or range.
  • Example:


	<input type="number" name="age" min="18" max="100">


  • Users must enter a number between 18 and 100.


step


  • What it does: Specifies the legal number intervals for input types like number, date, range, etc.
  • Example:


 	<input type="number" name="age" min="18" max="100" step="5">


  • Users can enter 18, 23, 28, etc., within the range 18 to 100.


pattern


  • What it does: Defines a regular expression that the input value must match.
  • Example:


        
	  <input type="text" name="username" pattern="[A-Za-z]{3,}">
      <input type="submit" value="submit">


  • The input must be at least 3 letters long and only contain alphabetic characters.


autocomplete


  • What it does: Controls whether the browser should attempt to autocomplete the input field.
  • Example:


	  <input type="text" name="username" autocomplete="off">
      <input type="submit" value="submit">


  • The browser won’t try to suggest or complete the input field automatically.


autofocus


  • What it does: Automatically focuses the input field when the page loads.
  • Example:


	<input type="text" name="username" autofocus>
    <input type="submit" value="submit">


  • This input field will be ready for typing as soon as the page is opened.


multiple


  • What it does: Allows the user to select multiple values for input types like file or email.
  • Example:

        

	<input type="file" name="upload" multiple>
    <input type="submit" value="submit">


  • Users can select more than one file to upload.





html
form
input
label
radio