WEB Design using HTML 5

Topics Covered

Form, check box, radio, select...Option, label, text area, input type - text, password, radio, checkbox, selected, checked , submit, reset, required

readonly, placeholder, size, value

Exercise

Exercise Solution

Video tutorial

Part 1

https://www.youtube.com/edit?o=U&video_id=nxH_1ZaU3yI

Part 2

https://www.youtube.com/edit?o=U&video_id=ab-uqXJISzk

Part 3

https://www.youtube.com/edit?o=U&video_id=3j9svxaMFE8

Resources

Input controls are a way for the users to enter data

Input Types are: Text, Email, password, Date, Radio, checkbox , number, range, tel, hidden, file, button..etc.,

<Input type="text">  <Input type="password"> <Input type="email"> <Input type="Date"> <Input type="number">

Text Areas: to allow users to enter more than a single line of text.  it can be implemented  by using  <textarea>… </textarea> tag under the form tag.

Textarea

Textarea Sample code

Optional Attributes

Radio

<input type="radio" name="gender" value="male" checked > Male &nbsp&nbsp

<input type="radio" name="gender" value="female" > Female&nbsp&nbsp

<input type="radio" name="gender" value="other"> Other&nbsp&nbsp

Checkbox

<input type="checkbox" name="mix1" value="cgpa" checked> CGPA >2.5 &nbsp&nbsp

  <input type="checkbox" name="mix2" value="ielts"> IELTS >4

select ...option

<select name="special" size="3" multiple>

  <option value="Database">DATABASE</option>

  <option value="SE" >SE</option>

  <option value="Network">Network</option>

  <option value="IES" SELECTED>IES</option>

</select> 

Submit

<input type="submit" value="Submit" formaction="movingform.html">