Lab Sheet 7 - HTML RADIO & CHECKS
|
Name |
LOY DONG XUAN |
|
Matric. No. |
AI2000236 |
|
Section |
6 |
|
Lab Sheet 7 |
HTML RADIO &
CHECKS |
<!DOCTYPE html>
<html>
<body>
<h2> LAB-07 21-4-2020 </h2>
<h3> Example1 : Radio Button Input </h3>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<h3> Example2 :Input Type Checkbox </h3>
<input type="checkbox" name="v1" value="Bike"> I have a bike<br>
<input type="checkbox" name="v2" value="Car"> I have a car <br>
</body>
</html>
1.
Explain about the HTML code
above.
HTML
<input type = “radio”>
The <input
type="radio"> defines a radio button.
Radio buttons
are normally presented in radio groups (a collection of radio buttons
describing a set of related options). Only one radio button in a group can be
selected at the same time.
The radio group
must have share the same name (the value of the name attribute)
to be treated as a group. Once the radio group is created, selecting any radio
button in that group automatically deselects any other selected radio button in
the same group. You can have as many radio groups on a page as you want, as
long as each group has its own name.
The value attribute
defines the unique value associated with each radio button. The value is not
shown to the user but is the value that is sent to the server on
"submit" to identify which radio button was selected.
HTML <input type = “checkbox”>
The <input
type="checkbox"> defines a checkbox.
The checkbox
is shown as a square box that is ticked (checked) when activated.
Checkboxes are
used to let a user select one or more options of a limited number of choices.
HTML name attribute
The name attribute
specifies a name for an HTML element.
This name attribute
can be used to reference the element in a JavaScript.
In the case
name = “gender” means we give the button element the name “gender”.
HTML value attribute
The
value attribute in HTML is used to specify the value of the element with which
it is used. It has different meaning for different HTML elements.
Usage:
It can be used with the following elements: <input>, <button>,
<meter>, <li>, <option> <progress> and <param>.
<input>:
When the value attribute is present, it specifies the initial value of the
input element.
It
has a different meaning for different input type:
·
When
present in “button”, “reset” and “submit” it specifies the text on the button.
·
When
present in “text”, “password” and “hidden” it specifies the initial value of
the input field.
· When present in “checkbox”, “radio”
and “image” it specifies the value associated with the input.
In the case
value = “male”, each with the name set to contact and each with a unique value that uniquely identifies that individual
radio button within the group “male”
2. Write
a HTML code to display the output as show as Figure Q2 on the webpage.
Figure 1.1 shows the output of the code
The code is as follows:
<!DOCTYPE html>
<html>
<body>
<h2> LAB-07 21-4-2020 </h2>
<h3> Exercise </h3>
<b>
<input type="checkbox" name="vehicles" value="car"> Car <br>
<input type="radio" name="color" value="black"> Black
<input type="radio" name="color" value="white"> White
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="red"> Red <br>
<input type="checkbox" name="House" value="home" > Home<br>
<input type="radio" name="size
" value="small"> Small
<input type="radio" name="size" value="large"> Large <br>
</b>
</body>
</html>
Comments
Post a Comment