HTML Form

 HTML Forms are used to send data across the web, like
login, signup, search etc. Forms are often used as contact
form to convert information input by a user into
leads. Forms includes many inputs controls like text,
password, file, radio, checkbox etc.
 The elements used in HTML form are form tag as
parent, input, textarea,, select, button and label.

HTML Form
 HTML From Tag
 Form Tag defines the form and within this tag, there is action
attribute which tells the form where its contents will be sent when it is
submitted.

 An HTML form can have input elements, checkbox, radio buttons, submit
button and more.A form can also contain select dropdown, textarea, fieldset,
legend, and label elements.

Create HTML Form

form is build inside <form> tag. See the code below
<form action="" method="get" name="enquiry"> /* Content */
</form>
 HTML Form Attributes
Attribute Values Use
method get or post http get method submit form
data but is visible in url.
post includes data in body.
more secure as data is not
visible to user in url
action path the backend file collecting
form data
name any name name of form control

 Input Element
 The most important form element is the input element. The input element is
used to get user information. An input element can be of
type text, password, checkbox, radio button, submit button and more.
  The default input type is text

Attribute Name values Use

type text, password, file, radio, type defines type of
checkbox, button, submit, and input control.
reset
size default value is 20 change size of input control
tabindex any numeric value used to define a sequence
followed by user when he
navigate using Tab key
value any possible value set a default value of input
control
maxlength n digits set maximum characters limit
disabled disabled input control, or
fieldset tag
checked Check checkbox or radio
button
multiple Used in input type file for
multiple files upload
  Input Type Text
o Input type text <input type="text"> is the common input element for name,
surname, country, numbers and symbols in single line. Default input type is always
text. But still it is recommended to define type attribute in input element.

HTML Input type text

First Name: Last Name:

<label>First Name: <input type="text"></label>

<label>Last Name: <input type="text"></label>

Label
 Label tag is used to write the content just before text field. To Specify
particular label, place input inside label or the value of for attribute inside
label should match the id of input control.

<label>First Name: <input type="text"></label>

First Name:
<label for="name">Name:</label>

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

<label for="lname">Last Name:</label>

<input type="text" id="lname">

Last Name:

 Label Usage
Its always recommended to use inputs with labels for web accessibility. If label is
not required, use aria-label attribute with placeholder.
<label for="name">Name:</label>

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

 value attribute
value attribute can also be used inside input or textarea. Usually
we ask user to fill values, but if value is fixed, use value attribute.
First Name:

<form>
<label for="fname">First Name:</label>
<input type="text" value="First Name" id="fname" >
<label for="lname">Last Name:</label>
<input type="text" value="Last Name" id="lname" > </form>

First Name:

Last Name:

 Maxlength
maxlength attribute is used to restrict no of characters in a text
field. maxlength value is a number. Maxlength attribute is useful for form
validations.
 <form>
<label for="fname">First Name:</label>
<input type="text" id="fname" maxlength="10">
<label for="age">Age:</label>
<input type="text" id="age" maxlength="3"> </form>

 Size
Size attribute is used to set the size of input or textarea. The default size is
20. To increase or decrease input size, change value of size

<label>Age: <input type="text" size="3"> </label>

 Input type Password

The input type password is used to write passwords. The password value is
written in encrypt form. i.e. a user cannot see, copy or cut password data from
input type password.
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" >
</form>
 Radio Buttons
Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same
value on both radio inputs.

<input type="radio" name="gender" id="male">

<label for="male">Male</label>
<label for="female">Female</label>

Male Female

 Checkbox
Checkbox are used to select multiple selections unlike radio button. They can
be checked and unchecked. We can use checkbox for hobbies, interests, terms
& conditions, etc.
 <label> <input type="checkbox"> :Bike</label>
<label> <input type="checkbox"> :Car</label>

Bike
Car

 Select Dropdown
select or select dropdown is used to fetch single or multiple options in dropdown
list. Select options are fixed, thus used can choose only given option or options. To select
city, country, date, month, year etc, Select Dropdown is used.

<select>
<option selected disabled>--Select City--</option>
<option>New York</option>
<option>Chicago</option>
<option>Los Angeles</option>
<option>Washington DC</option>
</select>
Current City: select city

 Textarea
Textarea is used to write multiple line. Like post, query, address, comments,
reviews etc. Textarea can have row and col attributes. Default rows are 2, and
default columnns are 20.
<textarea></textarea>
<textarea rows="4"></textarea>
<textarea rows="4" cols="30">
</textarea>

 Submit Button
Submit Button or input type submit is used to send information from user
to web server. Submit button can be used only once in a form tag.

<input type="submit">
 Reset Button
Reset Button or input type reset is used to reload form data, without refreshing
webpage. Reset is also used once in a form tag.
<input type="reset">

 Button Tag
Button Tag or Button can create buttons, like input type button. Button Tag is pair
element. We can use image, icon or child element inside button tag.

Type of buttons
•Button, <button>Button</button>.
•Reset button, <button type="reset">Button</button>.
•Submit button, <button type="submit">Button</button>.