HTML <form>

8th February 2020 | Christopher Pisani

The HTML element <form> is used to enclose user input data to be processed. Various type inputs, require the form function, to be addressed with the appropriate types when posting whether it is data or files.

'post' and 'get', what's this ?

When posting a form, two methods are available, the post and get methods.

When sensitive information, like a username and password, are entered in a website, the post method should be used for data not to be visible in the address bar and transferred securely to the back-end server for further processing.

On the other hand, the get method will display the information sent through the form and attaches it to the address bar.

An example when using the get method, the address bar link will look something like this "https://www.jazzo.co.uk?pageNumber=1". This will be easier for a user to share with another party.

<form action="" method="post">
  <div>
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required >
  </div>
  <div>
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required >
  </div>
  <div>
    <input type="submit" value="Subscribe!">
  </div>
</form>

Available Attributes

Attribute	Values	Functionality
accept-charset	ASCII ANSI 8859-1 UTF-8	Special character used when submitted
action	URL	The URL where the page will be processed
autocomplete	on off	Turns on or off autocomplete
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	How form will be encrypted when method POST is used
method	POST GET	HTTP method when submitting form
name	text	The form name
novalidate		Whether or not to validate the form inputs
target	_blank _self _parent _top	Where response is displayed after submition