G4G0-1/Semester 1/Web Development and HCI/Week 4/Week 4 Web Development.md

Lecture 1 (13:00) - Tables and Forms Cont.

Big Tables

<thead></thead> - Table Head <tbody></tbody - Table Body <tfoot></tfoot> - Table Footer

Forms

Form Structure

Forms require a:

• Action attribute - a URL for the page on the server that will receive the form data
• Method attribute - usually GET or POST.

<form action='send_email.php' method='GET'>
	<p>Form Controls Appear</p>
</form>

<form action="htps://example.com/login.php">
	<p>Username:
		<input type="text" name="username" size="15" maxlength="30" />
	</p>
	<p>Password
		<input type="password" name="password" size="15" maxlength="30" />
	</p>
</form>

Input

• type is the control type of the input. - type="password" identifies the input would be protected, and plaintext is hidden.
• name identifies the field in the sent data
• maxlength limits the character input length

Text Area

<form action="https://example.com/comments.php" >
	<p>What did you think of this gig?</p>
	<textarea name="comments" cols="20" rows="4">
		Enter your Comments
	</textarea>
</form>

Radio Buttons

<form action="https://example.com/genre.php" >
	<p>Please select your favourite genre: <br />
		<input type="radio" name="genre" value="Rock" checked="checked" />Rock
		<input type="radio" name="genre" value="Pop" />Rock
		<input type="radio" name="genre" value="Jazz" />Rock
	</p>
</form>

• One radial button must be checked
• Each button in a group should have the same name

Checkbox

<form action="https://example.com/profile.php" >
	<p>Please select your favourite genre: <br />
		<input type="checkbox" name="service" value="itunes" checked="checked" />iTunes
		<input type="checkbox" name="service" value="lastfm" />Last.fm
		<input type="checkbox" name="service" value="spotify" />Spotify
	</p>
</form>

• No elements have to be checked, but it is good practice.

Lecture 2 (15:00)

Drop-Down List

<form action="https://example.com/profile.php">
	<p>What device do you listen to music on?</p>
	<select name="devices" size="3" multiple="multiple">
		<option value="ipod" selected="selected">iPod</option>
		<option value="radio">Radio</option>
		<option value="computer">Computer</option>
	</select>
</form>

• <option> elements used to define each option.
• <select> elements allow users to select an option from a drop down list.
• size dictates the font size of the list items.
• multiple sets the capability to select multiple items in the list.
• selected sets the default selected value(s) in the list

File Inputs

<form action="https://example.com/upload.php" method="POST">
	<p>Upload your song in MP3 format: </p>
	<input type="file" name="user-song" />< br/>
	<input type="submit" value="Upload" />
</form>

• value in <input type="submit"../> sets the content of the submit box

Submit Button

<form action="https://www.example.com/subscribe.php">
	<p>Subscribe to our email list</p>
	<input type="text" name="email" />
	<input type="submit" name="subscribe" value="Subscribe" />

Image Button

<form action="https://example.com/subscribe.php">
	<p>Subscribe to our email list</p>
	<input type="text" name="email" />
	<input type="image" src="images/subscribe.png" />
</form

Labelling Controls

<label>Age: <input type="text" name="age" /></label><br />

Gender:
<input id="female" type="radio" name="gender" value="f" />
<label for="female">Female</label>

<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>

Grouping Elements

<fieldset>
	<legend>Contact Details</legend>
	<label>Email: <br />
	<input type="text" name="email" /></label><br />
	<label>Mobile: <br />
	<input type="text" name="mobile" /></label><br />
	<label>Telephone: <br />
	<input type="text" name="telephone" /></label><br />
</fieldset>

Form Validation

• Used to be handled by JS, but is now implemented in HTML5
• Reduces traffic load by handling checks clientside

<form action="http://example.com/login.php" method="post">
	<label for="un">Username: </label>
	<input type="text" name="user" required="required" id="un" />
	<br />
	<label for="pw">Password: </label>
	<input type="password" name="pwd" required="required" id="pw" />
	<input type="submit" value="submit" />
</form>

Date Input

<form action="https://example.com/bookings" method="post">
	<label for="dep">Departure Date: </label>
	<input type="date" name="depart" id="dep" />
	<input type="submit" value="Submit" />
</form>