🚨 $100K in Sight: Follow Bitcoin’s Final Push Live! TRACK NOW

Code has been added to clipboard!

HTML form Tag

Reading time 2 min
Published Mar 19, 2019
Updated Sep 30, 2019

HTML form: Main Tips

  • The HTML <form> tag groups elements and sends their data to a web server.
  • A typical form element includes an <input> element with a type value of submit, which is used to submit an HTML <form>.

Use of form Element

The HTML <form> defines an area, containing interactive elements for submitting data.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Attributes to Use With form

accept

Sets a comma-separated list of types that a server accepts.

Example
<form action="upload" method="POST" enctype="multipart/form-data" accept="image/jpeg, image/png">
  Select Image: <input type="file" name="uploaded_filename">
  <input type="submit" value="Upload">
</form>

Note: removed in HTML5. Apply the accept attribute for a specific <input> element as an alternative.

accept-charset

Sets a space-separated list of character encodings used while submitting data.

Example
<form action="search" method="GET" accept-charset="ANSI ISO-8859-1">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

action

The URI of a program, processing the <form> data.

Example
<form action="http://www.bitdegree.org/" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

autocomplete

Sets the autocomplete feature to ON or OFF.

Example
<form action="register" method="POST" autocomplete="on">
  Surname: <input type="text" name="name">
  Personal mail: <input type="text" name="email">
  <input type="submit" value="Register">
</form>

enctype

In cases when method attribute is post, enctype becomes the MIME type of data used for sending the form to the server.

Example
<form action="upload" method="POST" enctype="multipart/form-data" accept="image/*">
  Select Image: <input type="file" name="uploaded_filename">
  <input type="submit" value="Upload">
</form>

method

Sets the type of HTTP method for form submission.

Example
<form action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

name

Defines the <form> name.

Example
<form name="searchForm" action="search" method="GET">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

Note: HTML4 deprecated the name attribute. ID applies instead. In HTML5, the attribute cannot be empty and must be unique.

novalidate

Sets a form not to be validated during submission.

Example
<form action="register" method="POST" novalidate>
    Surname: <input type="text" name="name">
    Personal mail: <input type="text" name="email" required>
    <input type="submit" value="Register">
</form>

target

Sets the target location for the web server response.

Example
<form action="http://www.bitdegree.org/" method="GET" target="_blank">
  Search Term: <input type="text" name="search_query">
  <input type="submit" value="Search">
</form>

Browser support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
All
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
All
Browser image
Opera
All
Browser image
Safari
All