Html inputs LEARNOVITA

HTML Input Tutorial | Learn the Forms & Input Tags

Last updated on 12th Aug 2022, Blog, Tutorials

About author

Yeshwant singh (Html Developer )

Yeshwant Singh is an Html Developer with 6+ years of experience in a reputed company. He has expertise in HTML and CSS, PHP and MySQL, Javascript, and Node JS. He spends most of his time researching technology and startups.

(5.0) | 19781 Ratings 2089

Example:

An HTML form with 3 input fields; two text fields and a one submit button:

  • <"form action="/action_page.php">
  • <"label for="fname">First name:<"/label">
  • <"input type="text" id="fname" name="fname"><"br"><"br">
  • <"label for="name">Last name:<"/label">
  • <"input type="text" id="lname" name="lname"><"br"><'br">
  • <"input type="submit" value="Submit">
  • <"/form">
  • Definition and Usage:

    • The <"input"> tag denotes an input field where the user can enter data.
    • The <"input"> element is the more important form element.
    • The <"input"> element can be displayed in several ways, depending on a type attribute.

    The various input types are as follows:

    • <"input type="button">
    • <"input type="checkbox">
    • <"input type="color">
    • <"input type="date">
    • <"input type="datetime-local">
    • <"input type="email">
    • <"input type="file">
    • <"input type="hidden">
    • <"input type="image">
    • <"input type="month">
    • <"input type="number">
    • <"input type="password">
    • <"input type="radio">
    • <"input type="range">
    • <"input type="reset">
    • <"input type="search">
    • <"input type="submit">
    • <"input type="tel">
    • <"input type="text"> (default value)
    • <"input type="time">
    • <"input type="url">
    • <"input type="week">
    HTML program

    Attributes:

      audio/* video/* image/* media_type
      AttributeValueDescription
      accept file_extension Denotes a filter for what file types the user can pick from the file an input dialog box (only for type=”file”)
      alt text Denotes an alternate text for an images (only for type=”image”)
      autocomplete on off Denotes a whether an <"input"> element should have autocomplete enabled
      autofocus autofocus Denotes a that an <"input"> element should automatically get focus when the page loads
      checked checked Denotes that an <"input"> element should be pre-selected when the page loads (for type=”checkbox” or type=”radio”)
      dirname inputname.dir Denotes that the text direction will be a submitted
      disabled disabled Denotes that an <"input"> element should be a disabled
      form form_id Denotes the form the <"input"> element belongs to
      formaction URL Denotes the URL of the file that will process be the input control when the form is submitted (for type=”submit” and type=”image”)
      formenctype application/x-www-form-urlencoded multipart/form-data text/plain Denotes how the form-data should be an encoded when submitting it to the server (for type=”submit” and type=”image”)
      formmethod get post Explain the HTTP method for sending data to the action URL (for type=”submit” and type=”image”)
      formnovalidate formnovalidate Defines that form elements should not be validated when submitted
      formtarget _blank _self _parent _top framename Denotes where to display the response that is received after submitting a form (for type=”submit” and type=”image”)
      height pixels Denotes the height of an <"input"> element (only for type=”image”)
      list datalist_id Refers to a <"datalist"> element that contains pre-explained options for an <"input"> element
      max number date Denotes the maximum value for an <"input"> element
      maxlength number Denotes the maximum the number of characters allowed in an <"input"> element
      min number date Denotes a minimum value for an <"input"> element
      minlength number Denotes the minimum number of a characters required in an <"input"> element
      multiple multiple Denotes that a user can an enter more than a one value in an <"input"> element
      name text Denotes the name of an <"input"> element
      pattern regexp Denotes a regular expression that an <"input"> element’s value is checked against
      placeholder text Denotes a short hint that describes the expected value of an <"input"> element
      readonly readonly Denotes that an input field is read-only
      required required Denotes that an input field must be filled out before submitting the form
      size number Denotes the width, in characters, of an <"input"> element
      src URL Denotes the URL of the image to use as submit button (only for type=”image”)
      step number any Denotes the interval between the legal numbers in an input field
      type button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week Denotes the type <"input"> element to display
      value text Denotes the value of an <"input"> element
      width pixels Denotes the width of an <"input"> element (only for type=”image”)

    Global Attributes:

    The <"input"> tag also encourages the Global Attributes in HTML:

    Event Attributes

    The <"input"> tag also encourages the Event Attributes in HTML.

    HTML Input form* Attributes:

    Attributes in HTML

    The form Attribute: The input form attribute Denotes the form a <"input"> element belongs to.The value of this an attribute must be equal to the id attribute of the <"form"> element it belongs to.

    • <"form action="/action_page.php" id="form1">
    • <"label for="fname">First name:<"/label">
    • <"input type="text" id="fname" name="fname"><"br"><"br">
    • <"input type="submit" value="Submit">
    • <"/form>
    • <"label for="lname">Last name:<"/label">
    • <"input type="text" id="lname" name="lname" form="form1">

    The formaction Attribute: The input formaction attribute Denotes the URL of the file that will process an input when the form is submitted.

    The form enctype Attribute: The input form enctype attribute Denotes how the form-data should be encoded when submitted (only for forms with method=”post”).

    HTML Input Types:

    Input Type Text: <"input type="text"> explain a single-line text input field:

    Input Type Password: <"input type="password"> explain a password field:

    Input Type Submit: <"input type="submit"> explain a button for submitting form data to a form-handler.The form-handler is typically a server page with the script for processing input data.The form-handler is specified in a form’s an action attribute:

    Input Type Reset: <"input type="reset"> explain a reset button that will reset all form values to their of default values:

    Input Type Radio: <"input type="radio"> explain a radio button.Radio buttons let a user select ONLY ONE of a limited number of the choices:

    Input Type Checkbox: <"input type="checkbox"> explain a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of the choices.

    Input Type Button: <"input type="button"> explain a button:

    Input Type Color: The <"input type="color"> is used for input fields that should contain the color.Depending on the browser support, a color picker can show up in the input field.

    Input Type Date: The <"input type="date"> is used for input fields that should contain a date.Depending on the browser support, a date picker can show up in an input field.

    Input Type Datetime-local: The <"input type="datetime-local"> specifies a date and time input field, with no time zone.Depending on the browser support, a date picker can show up in the input field.

    Input Type Email: The <"input type="email"> is used for an input fields that should contain a email address.Depending on the browser support, the e-mail address can be automatically validated when submitted.Some smartphones recognize the email type, and add “.com” to the keyboard to match an email input.

    Input Type Image: The <"input type="image"> explains an image as a submit button.The path to the image is specified in the src attribute.

    Input Type File: The <"input type="file"> explains a file-select field and a “Browse” button for a file upload.

    Input Type Hidden: The <"input type="hidden"> explains a hidden input field (not visible to a user).A hidden field lets web developers include data that cannot be seen or modified by the users when a form is submitted.A hidden field often stores a database record that is required to be updated when the form is submitted.

    Input Type Month: The <"input type="month"> allows the user to select the month and year.Depending on the browser support, a date picker can show up in an input field.

    Input Type Number: he <"input type="number"> explains a numeric input field.Also set restrictions on what numbers are accepted.

    Are you looking training with Right Jobs?

    Contact Us

    Popular Courses