Lab 07 HTML Radio & Check BIW 10103 INTRO TO WEB TECHNOLOGY

 CINDY BEH XIN YI 

AI200259

Lab 07

HTML Radio & Check


INFORMATION

HTML Forms

 

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

There are various form elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax –

 

INSTRUCTION

1.     By using Notepad, type the following text:

<!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>

2.     Save the file as Lab_07.html.

3.     Upload your work into the blog.


QUESTIONS
1.     Explain about the HTML code above.

The HTML code above have the elements which is mainly use to make a form in html. I am going to explain these elements one by one.



<input type="radio">

-       This button normally presented in 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.

name

-       This attribute must use the name in same group.

value

-       This attribute defines the unique value associated with each radio button.

<input type= “checkbox”>

-       This element defines a checkbox which shown as a square box that is ticked (checked) when activated.

-       This allows users to choose one or more options at the same time.

2. Write a HTML code to display the output as show as Figure Q2 on the webpage.

<!DOCTYPE html>

<html>

<body>

 

<h2> LAB-07 21-4-2020 </h2>

 

<h3> Exercise </h3>

 

<input type="checkbox" name="v1" value="car"> Car<br>

<input type="radio" name="colour" value="black"> Black

<input type="radio" name="colour" value="white"> White

<input type="radio" name="colour" value="green"> Green

<input type="radio" name="colour" value="red" > Red<br>

<input type="checkbox" name="v2" value="home"> Home <br>

<input type="radio" name="size" value="small"> Small

<input type="radio" name="size" value="large" checked> Large

 

 

</body>

</html>















3.     Make a report and submit it to the Author.

4.     Put your report and answer to your blog also. 

Comments

Post a Comment

Popular posts from this blog

Lab 06 HTML Form

Image
  Lab #6: HTML HTML Forms QUESTIONS 1.      Explain about the HTML code above. The HTML code above have the elements which is mainly use to make a form in html. I am going to explain these elements one by one. Elements Explanation <form action="/action_page.php"> -        This is the element which is a container for different types of input elements, such as text files, checkboxes, radio buttons, submit buttons. <label for="fname"> -        This element defines a label for several elements such as <input type = “text”> <input type="text" id="fname" name="fname" value=""> -        This element will display a single line text input field for users to input their data. <input type="submit" value="Submit"> -  ...
Read more

Lab 09 HTML Styles -CSS

Image
 CINDY BEH XIN YI  AI200259 Lab #9: HTML Styles - CSS INFORMATION CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once . CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS can be added to HTML elements in 3 ways: ·        Inline - by using the style attribute in HTML elements ·        Internal - by using a <style> element in the <head> section ·        External - by using an external CSS file INSTRUCTION 1.      By using Notepad, type the following text:     Example 1                                                    ...
Read more