HTML Elements - Part 4 - Forms and Markup
Strict XHTML 1.0 DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional XHTML 1.0 DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
HTML4 DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5 DOCTYPE
<!DOCTYPE html>
XML DOCTYPE
<?xml version="1.0" ?>
Form structure
<form action="http:/....com/" method="get/post" id=" "> ...Whatever text, inputs, etc... </form>
Global Attribute
A global attribute can be used in any element in HTML. Examples are the id and class attributes.
id attribute - Part 2
A global attribute, it allows the user to give each case of a new element a name so it can be identified by other elements. It comes especially in handy when using CSS to style certain parts of a page separate from each other, and even allows the use of JavaScript on your page so individual elements can interact with the JavaScript.
class attribute
A global attribute, it is used similarly to the id attribute except it gives multiple elements the same class value, so that they can be grouped together. This once again allows the use of CSS and JavaScript on these elements.
<button> </button>
Allows you to place more elements as a button. Stuff between the tags becomes your button.
required attribute
Can be used on <input> or similar element. When set to "required", won't let the user submit while it's blank.
<form> </form>
Contains forms, as well as the action, method, and id attributes that shape them.
<select> </select>
Creates a drop down menu. Contains multiple <option> elements that create the individual choices. Uses name attribute.
<textarea> </textarea>
Creates a multi-line text form that has a starter phrase in it that usually must be deleted before the user responds. Set size using the cols and rows attributes which measure it in pixels. Also, name it.
<input />
Creates a single form and gives basic info about it using the type, name, and maxlength attributes.
Block or Block Level Elements
Elements that always appear on a new line when called. Some examples are <h1>, <p>, <ul>, <li>, etc....
Inline Elements
Elements that always appear on the same line as the elements before them. Examples: <a>, <b>, <img>, etc....
action attribute
Found in the <form> element, this tells where to send the form data when it is submitted (as a url).
value attribute
Gives the value returned in by a form if a certain choice offered is selected (in drop downs, checkboxes, etc...).
<fieldset> </fieldset>
Groups forms together, usually by drawing a box around the different forms. Simply place the <input> or other elements in this one. Often used with the <legend> element.
multiple attribute
If used in the <select> element, and set to "multiple" it allows multiple choices to be selected.
type attribute part 1
In an <input> element, this attribute gives the type of form that is being used for some types of form. type="text" means it's a single-line text answer. type="password" means it's a password. type="radio" means radio boxes. See checked attribute. type="checkbox" means check boxes. type="file" means a file upload. type="submit" means you are submitting data to a server, such as an email for an email list.
size attribute
In many elements, it is being phased out and shouldn't be used. But when used in the <select> element, it turns a drop down into a multiple select box by giving the number of options that should show at one time.
Button Control
Inside form element: <button> <img src="...jpg" alt=" " width=" " height=" " /> </button>
Date Input
Inside form element: <input type="date" name=" " />
Email Input
Inside form element: <input type="email" name=" " />
Search Bar
Inside form element: <input type="search" name= " " placeholder=" " />
URL Input
Inside form element: <input type="url" name=" " />
Labeling a Form
Inside form element: <label>... <input... /> </label> or Inside form element: <input... id="x"... /> <label for="x">...</label>
Checkbox
Inside form element: <p> <input type="checkbox" name=" " value="..." checked="checked" /> ... </p>
Password Input
Inside form element: <p> <input type="password" name=" " maxlength=" " /> </p>
Radio Button
Inside form element: <p> <input type="radio" name=" " value="..." checked="checked" /> ... </p>
Text Input (Single Line)
Inside form element: <p> <input type="text" name=" " maxlength=" " /> </p>
File Input Box
Inside form element: <p> ... </p> <input type="file" name=" " /> <input type="submit" value=" " />
Image Button
Inside form element: <p> ... </p> <input type="image" src="...jpeg" width=" " height=" " />
Submit Button
Inside form element: <p> ... </p> <input type="submit" name=" " value=" " />
Drop Down List
Inside form element: <p> ... </p> <select name=" "> <option value=" ">...</option> <option value=" ">...</option> </select>
Text Area (Multi-Line)
Inside form element: <p> ... </p> <textarea name=" " cols=" " rows=" ">...</textarea>
Multiple Select Box
Inside form element: <select name=" " size=" " multiple="multiple"> <option value=" " selected="selected"> ... </option> <option value=" "> ... </option> </select>
Comments
They are enclosed in these symbols: <!-- Comment Goes Here -->
<div> </div>
This element seems simple, but is important. In essence, you place any elements that you want grouped (for example in the header of your webpage) and you place them in the div element. Presentation whys, all this does is make the elements in the div element start on a new line. But, if you give the div element a class or id value, then you can use CSS and JavaScript to affect the entire set of elements simultaneously.
<label> </label>
This one can be used two ways: either using a for attribute to label, or being placed around the actual <input> or other element to label the form. See both examples.
method attribute
This tells whether to get or post the info. To get the info is best for short forms and simple data. To post data is good for file uploads, long text data, and passwords. method="get" or method="post"
selected attribute
Used in a <option> element. When set to "selected", the computer loads the form with that option already selected.
id attribute - Part 1
Used in many elements, including the <form> element. It gives an element a distinctive marker or name.
<option> </option>
Used in the <select> element to create an option in a drop down menu. Uses value attribute.
<!DOCTYPE>
Used to tell the browser what version of HTML is being used. Must be the very first thing in an HTML document. See the examples.
<legend> </legend>
Used with the <fieldset> element. When placed inside it, right after its opening tag, it can name the group of forms that are in the <fieldset>.
type attribute part 2
type="image" means your submit button is an image. You can use all the attributes for photos in the <input /> attribute when type="image". type="hidden" means a hidden form that can't be seen by the user. type="date" means a date is entered. type="email" means an email is entered. type="url" means a url is entered. type="search" means a search bar is created.