Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

316 CHAPTER 7 Working with forms


■■CONNECT Used with a proxy that can switch dynamically to being a tunnel.
■■DEBUG ot defined in the HTTP/1.1 specification; starts ASP.NET debugging. Informs N
Visual Studio 2012 of the process to which the debugger will attach.
When you browse to a webpage, the GET method is used to retrieve the page from the
server. If the webpage contains a form for collecting data from the user and the data is
submitted to the server, the browser will execute the POST method and pass the data to the
server. In Chapter 8, “Websites and services,” you see how you can use GET, POST, PUT, and
DELETE to perform create, retrieve, update, and delete (CRUD) operations, which you might
use when modifying data.

Submitting form data to the web server


You can use the HTML <form> element to create a web form that collects data and sends the
data to the web server or to another location such as an email address. A typical use of the
<form> element is as follows.
<form method="post" action="getCustomer.aspx" >
Enter Customer ID:
<input type="text" name="Id" />
<input type="submit" value="Get Customer" />
</form>

This form prompts the user to enter a customer ID, displays a text box that collects the
desired customer ID, and displays a submit button that initiates the sending of data to the
web server. The method of the form indicates the HTTP method to use when sending the
data to the server. The action is either an absolute or relative URL of the resource that will
receive the data.

Sending data when submitting a form


Not all elements can send data when the Submit button is clicked. For simplicity, the elements
that can send data upon submission will be referred to as form submission elements. There are
many new input types with HTML5. If the browser doesn’t recognize the input type, it will fall
back to treating the input as a text box. The following is a list of the form submission ele-
ments available in HTML5.
■■<textarea> A multiline text input control. The cols attribute indicates the desired
width of the <textarea> based on the quantity of columns you want. The <textarea>
element has a maxlength attribute that can be set to constrain the quantity of char-
acters the <textarea> will accept. You can also set a placeholder attribute to provide a
small hint to the user until text is entered. The wrap attribute can be set to soft or hard.
Setting to soft (the default) does not insert linefeeds in the posted data. Setting to
hard inserts linefeeds based on the cols attribute setting.
■■<select> A drop-down list containing <option> elements, which are the list items.
The <select> element has a multiple attribute that specifies that you want to allow

Key
Te rms
Free download pdf