Building Forms

Forms are an essential part of the internet as they provide a way for websites to capture information about users, process requests, and give controls for nearly every use of an application imagined. By providing controls, or fields, forms can request a small amount of information, often a search query or username and password, or a large amount of information, perhaps shipping and billing information or a job application.

Text Fields

One of the primary elements used to obtain text from users is the input element. The input element uses the type attribute to determine what type of information is to be captured within the specific control. The most popular type attribute value is text, which denotes a single line text input.

<input type="text" name="sample_text_field">
Demo of above code

Textarea

Another element used to capture text based data is the textarea element. The textarea element differs from the text input in that it is for larger passages of text spanning multiple columns. The textarea also has start and end tags which can wrap plain text. Since the textarea element only accepts one type of value the type attribute doesn’t apply here, however the name attribute is still in effect.

<textarea name="sample_textarea">Sample textarea </textarea>
Demo of above code

Radio Buttons

Radio buttons are a quick and easy way to show a small list of options and allow users to make a quick decision. Radio buttons only allow users to select one option, as opposed to selecting multiple options.

<input type="radio" name="day" value="Friday" checked> Friday
<input type="radio" name="day" value="Saturday"> Saturday
<input type="radio" name="day" value="Sunday"> Sunday
Demo of above code
Friday Saturday Sunday

Checkboxes

Checkboxes are very similar to that of radio buttons. They use the same attributes and patterns, with the exception of checkbox as the type attribute value. The difference between the two is that a checkbox allows you to select multiple values and tie them all to one control name, while radio buttons limit you to one value.

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday
Demo of above code
Friday Saturday Sunday

Drop Down Lists

Drop down lists are a perfect way to provide users with a long list of options in a usable manner. Outputting every state within the country on a page with radio buttons would create a rather cluttered and daunting list. Drop down menus provide the perfect venue for a long list of options.

<select name="day">
   <option value="Friday" selected>Friday</option>
   <option value="Saturday">Saturday</option>
   <option value="Sunday">Sunday</option>
</select>
Demo of above code

Submit Button

Users click the submit button to process data after filling out a form. The submit button uses the input element with a type attribute of either submit or image. The submit attribute value is the most common as it is simple to use and provides the most control. The image attribute value is used specifically to set an image as a submit button, however with the use of CSS the need to use an image has greatly diminished.

<input type="submit" name="submit" value="Submit Form">
Demo of above code

Reset Button

To take the complete opposite action from submitting a form, users may also reset a form using the reset button. The reset button code works just like that of the submit button, however it uses the reset value for the type attribute.

<input type="reset" name="reset" value="Reset Form">
Demo of above code

Placeholder

The placeholder HTML5 attribute provides a tip within the control of an input and disappears once the control is clicked in, or gains focus. The placeholder attribute only applies to inputs with a type attribute value of text, email, search, tel, or url.

<input type="text" name="username" id="username" placeholder="Text to show">
Demo of above code

comments powered by Disqus