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.

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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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>
```