Scribd
Upload
36 views8 pages

Mma 484 W

The document describes how to create an HTML registration form that includes different form elements like text fields, radio buttons, checkboxes, and submit buttons. It provides code examples for a home page with navigation links, a login page, and a registration page. The registration form gathers user input using these elements and navigates to the home page upon form submission.

Uploaded by

kethan kumar reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views8 pages

Mma 484 W

The document describes how to create an HTML registration form that includes different form elements like text fields, radio buttons, checkboxes, and submit buttons. It provides code examples for a home page with navigation links, a login page, and a registration page. The registration form gathers user input using these elements and navigates to the home page upon form submission.

Uploaded by

kethan kumar reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Exp No: TITLE: Date:

Aim: Design a Registration Form which includes a multimedia content. On submitting the form,
the user should navigate to home page.

Description:

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
form elements
</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element. An <input> element can be displayed
in many ways, depending on the type attribute.

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button

The <label> Element

The <label> tag defines a label for many form elements. The <label> element also help users who
have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because
when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.

Page No: 1
Exp No: TITLE: Date:

Radio Buttons

The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited
number of choices.

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Checkboxes

The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler. The
form-handler is typically a file on the server with a script for processing input data. The form-
handler is specified in the form's action attribute.

Page No: 2
Exp No: TITLE: Date:

Source Code:
Home page:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration</title>

<style>

h1

text-align: center;

color: black;

background-color: brown;

nav

text-align: center;

justify-content: center;

button

margin: 30px;

Page No: 3
Exp No: TITLE: Date:

color: rgb(28, 18, 70);

background-color: rgb(154, 192, 214);

body{

color: aqua;

img{

width: 50%;

height: 50%;

justify-content: center;

display: block;

margin-left: auto;

margin-right: auto;

</style>

</head>

<body>

<img src="C:\Users\PGLAB-001\Documents\gprec.jpg" class="img">

<h1>College Registration Form</h1>

<nav>

Page No: 4
Exp No: TITLE: Date:

<button><a href="file:///D:/2848/home.html">Home</a></button>

<button> <a href ="file:///D:/2848/register.html">Sign up</a></button>

<button> <a href="file:///D:/2848/login.html">Login</a></button>

</nav>

</body>

</html>

Login page:

<html>

<body style="background-color=green">

<label for="email"><b>Email</b></label>

<input type="text" name="email" id="email"><br><br>

<label for="psw"><b>Password</b></label>

<input type="password" name="psw" id="psw"><br><br>

<label for="email"><b>Keep me signed in</b></label>

<input type="checkbox" name="checkbox" id="checkbox"><br><br>

<button type="submit"><b>Submit</b></button>

</body>

</html>

Registartion page:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

Page No: 5
Exp No: TITLE: Date:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<style>

h1

text-align: center;

background-color: bisque;

nav

text-align: center;

justify-content: center;

button

margin: 30px;

color: blue;

background-color: rgb(154, 192, 214);

h2{

text-align: center;

background-color: bisque;

Page No: 6
Exp No: TITLE: Date:

form

justify-content: center;

text-align: center;

background-color: rgb(204, 186, 186);

margin-left: auto;

margin-right: auto;

display: block;

width: 500px;

padding: 10px;

body

background-color: bisque;

</style>

<h1>

SIGN UP

</h1>

<h2>

<form action="hgyk.php">

<br>Enter your name: <input type="text" ></br>

<br>Enter your mobile num: <input type="number"></br>

<br>Enter your EmailID : <input type="text"></br>

Page No: 7
Exp No: TITLE: Date:

<br>Enter your college name: <input type="text"></br>

<br>Enter your gender:

male <input type="radio"name="hr">

female<input type="radio" name="hr"></br>

<br>Enter your DOB: <input type="date"><br>

<br>Enter password: <input type="text" ></br>

<br>Confirm password: <input type="text"></br>

</form>

</h2>

<nav>

<ul>

<button><a href="p2.html" target="_blank">Submit </a></button>

<button><a href="p2.html" target="_blank">Home </a></button>

<button><a href="login.html" target="_blank"> Login</a></button>

</ul>

</nav>

</body>

</html>

Page No: 8

You might also like