LOG IN

Forgot Your Password?


Incorrect login or password

SIGN UP



Existing user?

Forgot Password


Existing user?

HTML Forms

This chapter covers HTML forms in detail. Every variety of form element and user-input interface is covered, along with tips for organizing and styling forms.

Form Basics

An HTML form is a set of UI elements that allow a user to provide data, along with a mechanism for submitting that data to the server.

A very basic example might look like:

Even in this simple form, we can see there is an opportunity for the user to input data (first and last name) and the send that data to a server.

Forms can become very complicated, and there are many interesting input types now available thanks to HTML 5, but no matter how complicated they get, the heart of an HTML form is the same: a series of user input elements together with a way to submit the input to the server.

How a Form Works

Before diving in to all the different user interface elements, it would be a good idea to get a clear grasp on how a form functions when sending user data to a server.

A form creates an HTTP request — the same type of request that your browser sends when loading a page. The contents of that request are determined by the values inputted into the form. The response from the server is essentially the same as the type of response received from a page load — and the browser responds the same way, by loading the response as a new page.

In other words: a form submission is essentially the same as a request for a new page, except the request carries with it user-defined data provided through form inputs.

What happens with the requested data is a subject for server-side scripting (PHP, Ruby, etc.), so we won’t worry about that.

HTTP Requests and Form Methods

Forms can send two different types of requests:

  • POST
  • GET

These two request types have different meanings, which cause them to behave differently and so they should be used in different situations.

__The Semantic Difference Between POST and GET

A GET is the default HTTP request, and is the same type of request used by your browser when you type an address into the address bar. It is a request to “get” something.

A POST is not a request to get something, but rather a request to send or submit something. You can think about posting a letter, posting bail, or posting a sign.

The Technical Difference

When using a GET request, the input parameters are included into the URL.

http://example.com/search?term=thing+i+am+searaching+for

With a POST request, the input parameters are not included in the URL, but are rather sent in the body of the request.

The difference here makes sense based on the meaning of each type of request:

·         A GET request is asking for a specific resource, defined by the URL. Therefore, the details of that request should be included in the URL, because those details define what resource the request is actually asking for.

·         A POST request is sending a message to a particular address. The address is defined in the URL, and the message is defined in the body of the request.

When to use POST and GET in Forms

If a form is being used to request data and information — such as a search form — and isn’t primarily intended to add or edit content, it is probably best to use a GETrequest.

Other indications GET is the right choice:

  • Two different users submitting the same details into the form should get identical responses.
  • The response from the form is something one might want to link to directly.
  • Other than logging the traffic and activity, your database is the same after the form submission as it was before.
  • The form is a search form.
  • The user is using the form in order to get some information from your site, not to provide information to you.

If a form is being used to submit information, a POST is most likely the right choice.

Other indications that POST is the right choice:

  • It is highly unlikely that two different users would submit identical information.
  • It is highly unlikely that a single user would submit the exact same information more than once.
  • The form is used to submit information to the site, not to retrieve information from it.
  • Linking to the response page directly would be meaningless.
  • Your database is different after the form is submitted than it was before.

Additionally, there are two reasons why a POST should be used, even if a GET request makes more sense for other reasons:

  • For security reasons, it is preferable not to put the input parameters into the URL.
  • The length of the URL using a GET request would exceed 2000 characters.

Where to Define POST or GET

Every form submits information to the server using either the GET or the POST request type. This is defined with the method attribute in the <form> element.

<form method="GET">
<!-- form here -->
</form>
 
<form method="POST">
<!-- form here -->
</form>

The default method is GET, which has led to many unfortunate used of GET when POST would have been the right choice. Don’t rely on the default — use the correct method for your situation.

Form Action — The Requested URL

A form either gets a resource (defined by a URL) or posts information to a resource (defined by a URL).

The URL of the resource is defined by the action attribute in a form.

<form action="search.php" method="GET">
<!-- form here -->
</form>
 
<form action="edit-post.php" method="POST">
<!-- form here -->
</form>

As with href and src attributes, the URL can be relative (action="search.php") or absolute (action="http://example.com/search.php").

If the action attribute is omitted, the default URL is the current page. (This will still trigger a reload of the page, under normal circumstances.

Other attributes of <form>

The following attributes apply to the <form> element:

  • accept-charset — Defines the character set used for submitting form data. The default is the same as the document’s character set, so this is usually not needed.
  • action — The target URL for form submission. Explained above.
  • autocomplete — Enables autocomplete in supported browsers. Values are on or off. The default value is on. It is possible to override this setting on individual form elements.
  • enctype — Specifies how form data should be encoded. This applies to POST forms only. Values are:
    • application/x-www-form-urlencoded — All characters are encoded before sent. Spaces are converted to + symbols, and special characters are converted to ASCII HEX values. This is the default.
    • multipart/form-data — Characters are not encoded. This is required if you are using a file uploader in your form.
    • text/plain — Spaces are converted to + symbols, but special characters are not encoded.
  • methodGET or POST
  • name — The name of the form. It is usually a good idea to include one, and there’s no reason it couldn’t be the same as the id.
  • novalidate — Specifies that the form data should not automatically be validated when it is submitted. This attribute accepts no value. (Be careful with this.)
  • target — Equivalent to the target attribute on anchor links ( <a> ), this attribute specifies where the response from the form should be displayed.
    • _self — Opens response in same window. This is the default.
    • _blank — Opens the response in a new window or tab.
    • _parent — Opens the response in the form’s parent window or frame.
    • _top — Opens the response in the full body of the window.
    • framename — You can also specify the name of a frame to open the response into, if you have previously opened and named frames in the page.

 

Type: Password

If you want to obscure the characters entered into a text input, use the password type.

<form>

<label for="userName">User Name</label><br>

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

<br>

<label for="password">Password</label><br>

<input type="password" name="password" id="password"><br>

<br>

<input type="submit" value="Log In">

</form>

 

 

pe: Submit

The second most basic input type is the submit input, which defines the form’s submit button.

<input type="submit">

The default text on the submit button is “Submit”. This can be changed with the value attribute.

<form>

<input name="search">

<input type="submit" value="Search">

</form>

Another input type creates a similar GUI as the submit type — the button type. However, do not use the button for generic form submission. (It won’t work.) And don’t use the submit button for generic buttons within a form — it’ll work the wrong way.

Type: Password

If you want to obscure the characters entered into a text input, use the password type.

<form>

<label for="userName">User Name</label><br>

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

<br>

<label for="password">Password</label><br>

<input type="password" name="password" id="password"><br>

<br>

<input type="submit" value="Log In">

 

</form>

 

 

source: http://www.whoishostingthis.com/resources/html-for-beginners/


 << Previous