HTML  Input Elements

HTML Input Elements

continuation of my first blog.

https://devj.hashnode.dev/intro-to-web-html


Forms

Forms tag allows the user to enter data and it will be used in many ways depending on its attributes.

Form Attributes

autocapitalize

  • none: No capitalization.

  • sentences (default): It capitalizes the first letter of each sentence.

  • words: Capitalize the first letter of each word.

  • characters: Capitalize all characters.

autocomplete

Input elements can by default have their values automatically completed by the browser. possible values are off/on.

Attributes for form submission

action

The action attribute specifies where to send the form data when a form is submitted.

method

The HTTP method to submit a form with. methods/values are:

  • POST: The POST method where the form data is sent via server.

  • GET (Default): Sends Form data via a URL string. Form data appended to the action URL with a ? separator.

  • Dialog: When form is inside of dialog it closes the dialog without submission or clearing the form.


Input Elements

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user. Input tag gives a wide variety of types of input data and control widgets are available.

<input> types

Text

<input type="text" maxlength="4">

It allows you to write text in that particular field.

you can use attributes like maxlength or minlength to limit the character value of that particular field.

Email

<input type="email">

It allows you to write your email address in the field.

Password

<input type="password">

When you enter text in this area, characters get masked.

Button

<input type="button" value="Subscribe!">

It's just a simple push button that can be programmed with custom functionality. It displays the button's name as the value.

Submit

<input type="Submit">

Submit button submit all the form values which you have filled in.

Reset

<input type="reset">

Reset button resets the form values.

File

<input type="file" accept="image/*, .pdf, .doc">

Input type file is used to upload any file on the page. You can also limit accepted files by an attribute accept you can give instructions that only .jpg or .pdf files are accepted.

Some examples:

  • accept="image/.png" or accept=".png"

  • image/* * is able to define all available image extensions.

  • accept=".doc, .pdf" you can give a comma and add multiple file extensions.

Image

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

It is used as a graphical submit button.

Color

<input type="color" value="#f6b73c">

Input type color allows the user to choose a color via the color picker interface or you can also give a hex value.