Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
- The Outer Structure of an HTML Document
- Parents, Children, Descendants and Siblings
- Setting Up the Basic Document Structure
Creating and viewing a WEB PAGE
Text formatting in HTML
- Basic text formatting elements
- Creating Breaks
- Abbreviations, Definitions, Quotations and Citations
- Working with language elements
- Other text elements
- More formatting elements
Organising information using lists
Structure content with tables
Data collection with forms
- How a form looks like?
- Creating forms
- Input tags
- Text fields
- Password fields
- Checkboxes and radio buttons
- Hidden fields
- File upload fields
- Drop-down list fields
- Multiline text boxes
- Submit and Reset buttons
Navigation with links
Displaying images
If only a finite set of possible values is available to the user, you can give him a collection of options to choose from:
- Check boxes: Choose more than one option.
- Radio buttons: Choose only one option.
Radio buttons differ from check boxes in an important way:
“Users can select a single radio button from a set of options but can select any number of check boxes (including none, one, or more than one).”
If many choices are available (more than half a dozen), use a drop-down list instead of radio buttons or check boxes.
To create radio buttons and check boxes, take these steps:
- Use the <input> element with the type attribute set to radio or checkbox.
- Create each option with these attributes:
- name: Give the option a name.
- value: Specify what value is returned if the user selects the option.
You can also use the checked attribute (with a value of checked) to specify that an option should be already selected when the browser displays the form. This is a good way to specify a default selection. This markup shows how to format check box and radio button options:
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<form method="post">
<p>Which courses do you want from Edupoly?</p>
<ul>
<li>
<input type="checkbox" name="course" value="HTML" checked="checked" />HTML
</li>
<li>
<input type="checkbox" name="course" value="CSS" />CSS
</li>
<li>
<input type="checkbox" name="food" value="JS" />JS
</li>
</ul>
<p>What is your gender?</p>
<ul>
<li>
<input type="radio" name="gender" value="male" />Male
</li>
<li>
<input type="radio" name="gender" value="female" checked="checked" />Female
</li>
</ul>
</form>
</body>
</html>Which courses do you want from Edupoly?
- HTML
- CSS
- JS
What is your gender?
- Male
- Female
In the preceding markup, each set of options uses the same name for each input control but gives a different value to each option. You give each item in a set of options the same name to let the browser know they’re part of a set. If you want to, you can select as many check boxes as you like by default in the page markup — simply include checked=”checked” in each <input> element you want selected in advance.