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.
<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"
oraccept=".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.