This tutorial covers the objectives for the HTML & CSS IT Specialists exam by Pearson /Certiport. The objective is constructing and analyzing markup that uses form elements.
INTRODUCTION
HTML uses forms to collect information from web users. This information is sent over to a server for storage or processing.
<form></form> Element
The form element is a container for all the other input elements available. All the input fields that can be used inside of the form element will be listed below.
<form method="POST" action="https://www.rickrodriguezjr.com">
//Input fields go here.
</form>Form Element Attributes
The form element by itself is just a container that holds all other input fields. For the form element to actually function, it will need a little more information in the form of attributes. Here are some of the attributes that you will need:
//method attribute - tells the form how to send the information it collected to the server.
//action attribute - where the data that has been collected should be sent; this should be either a relative URL or an absolute URL.
<form method="get" action="https://www.rickrodriguezjr.com/test.php?">
<!-- all input forms go in here -->
</form>
Form Method Attribute
The form element requires the method attribute to provide additional information of how the information will get to its arrival location. Two options available to the method attribute are:
// GET - A GET request will append all the data to the URL in a name=value form each pair separated by an "&".
// POST - The POST request will send data in the background or through browser header requests.Advantages of POST vs. GET
POST
- Places the data in the HTTP Request or in the background.
- Has no size limitation.
- The data cannot be bookmarked for future use.
GET
- Data is added to the URL in the Browsers address bar (visible to the user)
- Their is a limit on how much data you can send.
- Not very secure.
- Can be bookmarked.
- Can be used with data that doesn’t require security.
Form Action Attribute
The action attribute is used to provide additional information to the form element by providing a location where the data should be sent to. The value for the action attribute is usually in the form of a relative or absolute url.
- Absolute URL – a complete address on the web such as https://www.rickrodriguezjr.com
- Relative URL – a partial address usually consisting of a folder or file, such as action=”index.php”
Input Types <input> tag
The <input> tag is a void tag or a individual tag without a closing tag. This tag specifies a input field that the user can enter data. The <input> tag by itself defines a generic input text field.
<form method="post" action="https://www.rickrodriguezjr.com">
<label for="name">Enter Name</label>
<input type="text" name="name" id="name">
</form>Input Type Attribute
The <input> tag can can be displayed to accept and validate many different types of data. This is accomplished by providing a type attribute. The type attribute informs the input tag what data to validate and how it should look. See below for explanation of different input type fields.
- <input type=”text”> – text field.
- <input type=”button”> a button.
- <input type=”file”> a file to upload.
- <input type=”month”> a month calendar field.
- <input type=”image”> an image input field.
- <input type=”date”> a mm/dd/yyyy field with the option of choosing from the calendar.
- <input type=”tel”> a field that accepts telephone numbers.
- <input type=”checkbox”> a checkbox field.
- <input type=”radio”> creates a radio button.
- <input type=”email”> creates a field that will only accept a validly formatted email.
- <input type=”password”> creates a field that will allow the typing of a password not visible to prying eyes.
For a more extensive list of input fields, please go to w3schools.com.
Select Input Element <select></select>
The select element is used to create a drop down list available to users. Users can select an item inside of the select drop down list. Items are defined by the <option></option> element. Every select element can have as many items as it wants.
//name attribute is used to send over a name=value pair to the server for
//the select element.
//The option element has a value attribute to define the value being sent to the
//server for that option.
<select name="items">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select><textarea></textarea> Element
The textarea element defines a multi-line text input field. This element is usually used for entering paragraphs or multiple lines of text. Some examples would be comments or text messages.
<textarea cols="10" rows="10" name="nameoftextearea" id="idoftextarea">
</textarea>Key Points for <textarea>
- The with and height of the textarea element is defined by the cols attribute and the rows attribute. They will be placed in the opening field for the textearea.
- The textarea can hold an unlimited number of characters.
- The name attribute is used in the opening tag to reference the field.
- The id attribute can be used to associate the text field with a label.
Label Element <label></label>
The label element defines a label for input fields. It provides a name to the input field. It is a good idea for accessibility to use labels as screen readers will read aloud the label when a field has focus.
<label for="username">Username</label>
<input type="text" name="username" id="username">