Description
CHAPTER 8 – USER INTERFACE DESIGN INDIVIDUAL ASSIGNMENT
Using a web-based or open source HTML editor, students will create a data entry form, as instructed below. You may not use a template or website company like wix.com. Examples of free HTML editor applications are HTML-Kit 292 (scroll down the page to download HTML-Kit 292), Coffee Cup, Sublime Text, NetBeans.
Examples of free web-based HTML editors are HTML-Online, W3Schools Online Code Editor.
The Client Information Form is to be used by spa employees to enter data when patrons (clients) visit the BSU Day Spa, located at 123 Main Street, Bowie, MD 20888. You will add all necessary form control elements to your form.
When employees interact with the form, they enter their employee user name and password. Include elements to collect personal information from each client, including birthdays and favorite color and form of payment. The size of the field for last name must be 30 characters. Last name, first name and all contact information are required to be filled in. Allow clients to indicate if they are spa members or not. BSU students get a 10% discount.
Spa services available include massages, facials, body wraps, nail care and waxing. Clients may leave a comment for any special attention they would like to receive. Enclose client personal information and spa services each in their own area on the website. Include submit and reset buttons.
You may add any other items or design elements you can think of, including images or Google search.
HTML – Adding an image:
<p>
</p>
- The <form> Element
- The <input> Element
- Input Type Search
- Input Type Password
- Grouping Form Data with <fieldset>
- Text Input
- The size Attribute
- Input Type Email
- The required Attribute
- Input Type Date
- Input Type Radio
- Input Type Checkbox
- Input Type Color
- The <select> Element
- The <textarea> Element
- Input Type Submit
- Input Type Reset
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
Example
<input name=”firstname” type=”text”>
The <input type=”search”> is used for search fields (a search field behaves like a regular text field).
Example
Search Google:
<input type=”search” name=”googlesearch”>
<input type=”password”> defines a password field:
Example
User name:<br>
<input type=”text” name=”username”><br>
User password:<br>
<input type=”password” name=”psw”>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type=”text” name=”firstname” ><br>
Last name:<br>
<input type=”text” name=”lastname” ><br><br>
</fieldset>
<input type=”text”> defines a one-line input field for text input:
Example
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>
The size attribute specifies the size (in characters) for the input field:
Example
First name:<br>
<input type=”text” name=”lastname” size=”30″>
The <input type=”email”> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Example
E-mail:
<input type=”email” name=”email”>
The required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input type=”text” name=”username” required>
The <input type=”date”> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
Birthday:
<input type=”date” name=”bday”>
<input type=”radio”> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<input type=”radio” name=”gender” value=”male” checked> Male<br>
<input type=”radio” name=”gender” value=”female”> Female<br>
<input type=”radio” name=”gender” value=”other”> Other
<input type=”checkbox”> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car
The <input type=”color”> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example
Select your favorite color:
<input type=”color” name=”favcolor”>
The <select> element defines a drop-down list.
Visible Values: Use the size attribute to specify the number of visible values.
Allow Multiple Selections: Use the multiple attribute to allow the user to select more than one value
Example
<select name=”cars” size=”3” multiple>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
<input type=”submit”> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
<input type=”reset”> defines a reset button that will reset all form values to their default values:
<input type=”submit” value=”Submit”>
<input type=”reset”>
