<back

Forms and Input in HTML

what is form?

The form element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
syntax:<form>...</form>
  • exmaple: <form action="https://httpbin.org/get" method="get"></form> //to get <form action="https://httpbin.org/post" method="post"></form> // to post
    • fieldset: it represent a set of inputs under a common name.
    legend: It creates a box like
    this

    it is important to notice that legend and fieldset are used together, legend expands its box size with respect to the size of fieldset

    Label:

    -this is used to improve the accesibility of the input we used.

    -we can directly click on the labelled input or textarea and access the input box.

    attributes:

    for: The for attribute value matches the id attribute of the associated form control. This association informs screen readers and assists in making the label clickable.

    example:
    <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Enter your username">

    INPUT

    -In HTML, the <input> element is used to create interactive form controls that allow users to enter and submit data.
    -It is one of the fundamental elements for building forms and collecting user input on websites.

    Attributes

    Attribute Description
    type specify the input control
    'text' , 'password' , 'number' , 'checkboxes' , etc.
    Name provides the name for the input control.
    value set the initial value for the input control
    placeholder gives short hint what will come in that input
    required give the importance to the input, the form cant be submitted if all required inputs are not filled.
    autocomplete it shows all previous entries within a drop down page.
    min-max this provide upper and lower limit to the range specific input type.
    pattern it ask user to input in a specific order only
    autofocus can be used only once in a page, it directly focuses the cursor to the input box.
    step for a number type input, on each change with the arrow key the number of steps it will jump is decided by this.
    cols decides the number of columns in textarea.
    rows decides the number of rows in textarea.

    Types

    Name Description example
    Text it is used for a simple text input

    Password it is similar to text, it just changes the input to dots

    Number this restricts the input to numeric value, which can be set by changing the value through toggle arrow

    Email this ensure that user has correctly input the email address

    URL input this enforces input validation to ensure the entered value is a valid url.

    checkbox -it can be multiple.
    -it is only two state, checked and unchecked.



    radio similar to checkbox, but only one can be selected at a time


    button clickable input which can submit, reset the form.
    datalist provides multiple option in the dropbox to select from.

    select It provides a closed list of options that the user can choose from by clicking or navigating with the keyboard.

    date it is used to input date, provide calender for ease of input