LAB 7

Lab #

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, textarea 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.

 

<!DOCTYPE html> declaration for a HTML document

<html> root element of an HTML page

<head> element that contains meta information of the HTML page

<body> element that declared the document’s body

<h2> & <h3> element that declares headings

<input type=”radio”> element that define as a radio buttons

< input type=”checkbox”> element that define as a checkbox

<br> element that define as break line

 

2.     




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

Figure Q2

<!DOCTYPE html>

<html>

<body>

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

     <h2> Exercise </h2>

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

     <input type="radio" name="color" value="black"> <b>Black</b>

     <input type="radio" name="color" value="white"> <b>White</b>

     <input type="radio" name="color" value="green"> <b>Green</b>

     <input type="radio" name="color" value="red"> <b>Red</b> <br>

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

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

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

</body>

</html>

 

 

Output:


 

Comments

Post a Comment

Popular posts from this blog

My Page 2

Image
 Here's my 2nd try making a website Question 1  <html> - Defines the HTML document <head> -  Contains metadata/information for the document <title>My   First   Webpage</title> -  Defines a title  for the document </head> <body> - Defines the document's body <h1   align="center">My   First   Webpage</h1> - HTML headings <p>Welcome to my first webpage.<br>I am using text editor and plain old html <p>By   learning   html,   I'll   be   able   to   create   web   pages   like   a   pro... <br> -  line break which   I   am   of   course.</p> - Defines paragraph </body> </html> Question 2 - Singular Tags - Works alone and are usually  placed before the text you want formatted - Paired Tags - Require an opening tag that turns a formatting feature on and a closing...
Read more

TCP//IP

Image
1.How to check your computer IP address? Give me several ways on how to do it. Method 1: Finding IP address using control panel (Windows) Step 1: Search  “View network connections” in the Windows search bar. Step 2:  Double click your active connections. Step 3:  Click “Details” and the IP address is beside the “IPv4 Address”. Method 2: Run cmd.exe and type ipconfig. 2. How are we going to setup static IP configuration? Step 1: Search  “View network connections” in the Windows search bar. Step 2: Right  click your active connections and go to "Properties". Step 3: Click "Internet Protocol Version 4 (TCP/IPv4)" and go to "Properties" Step 4: Click "Use the following IP address" and enter the IP address in the "Subnet mask". 3. When do we need to setup static IP configuration? - Setting up a home file server - Adding a second router to a network - Sharing a printer over a network 4. Do you know the type of UTHM IP configura...
Read more

Internal and External CSS

Image
 Example of using Internal CSS in HTML <!DOCTYPE html> <html> <style>      body {background-color: powderblue;}      h1   {color: blue;}      p     {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: Example of using External CSS in HTML <!DOCTYPE html> <html> <head>      <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Output: No colour because no External CSS file detected
Read more