Scribd
Upload
3 views

Grade 10 HTML Program

This document provides a guide on creating an HTML registration form using various HTML tags and JavaScript. It explains the purpose of the <form>, <input>, and <label> elements, along with their attributes and functionalities. Additionally, it includes sample code for the form and a script to display user input results on a separate page.

Uploaded by

Norman Carlo Quiros
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Grade 10 HTML Program

This document provides a guide on creating an HTML registration form using various HTML tags and JavaScript. It explains the purpose of the <form>, <input>, and <label> elements, along with their attributes and functionalities. Additionally, it includes sample code for the form and a script to display user input results on a separate page.

Uploaded by

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

HTML REGISTRATION FORM

How to make registration form in HTML using the following html tags with
attributes and script codes in JAVASCRIPT

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

It is refers to the creation of Form getting all the ELEMENTS as entry


made by the user input.

2. <input></input> = refers to entry made by the user.


= The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
Note: The form itself is not visible. Also note that the default width of
an input field is maximum of 20 characters.

Type Description

<input Displays a single-line text input field


type="text">

<input Displays a radio button (for selecting one of many choices)


type="radio">

<input Displays a checkbox (for selecting zero or more of many


type="checkbox"> choices)

<input Displays a submit button (for submitting the form)


type="submit">

<input Displays a clickable button


type="button">

3. The <label> Element Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
The <label> element also helps 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.

SCRIPT CODE

snippets

<script>
const resultsList= document.getElementById('results')
new
URLSearchParams(window.location.search).forEach((value,name)=>
{
resultsList.append(`${name}: ${value}`)
resultsList.append(document.createElement('br'))
})
</script>

Sample CODE:
A. This program will create a form and all the data entry or ELEMENTS will be posted to the other
page thru getElementsByID (initial entry of the user). Script getElelementsByID() function

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Enrolment Form</title>
</head>
<body>
<form action="result.html" method="GET">
<div>
<label>Name</label>
<input name="name">
</div>
<div>
<label>Password</label>
<input name="pwd" type="password">
</div>
<button>Submit</button>

</form>

</body>
</html>
B. This program will get the “RESULTS” or get elements or entry made by the user and display the
result in the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" conten="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>

<div id="results">
<a href="forms.html"> Back to Form <br></a>
<script>
const resultsList= document.getElementById('results')
new URLSearchParams(window.location.search).forEach((value,name)=>
{
resultsList.append(`${name}: ${value}`)
resultsList.append(document.createElement('br'))
})
</script>

</body>
</html>

ACTIVITY # 1:

Make a program will create a Registration Form or Enrollment Form containing the following
data:
Note: used proper initials stipulated besides each input element.

LRN NUMBER: lrn_no


FIRST NAME: fname
MIDDLE NAME: mname
LAST NAME: lname

Username: user_name
Password: pwd_name
BIRTHDATE: bdate
Gender: gender
Male and Female
Submit: submit

You might also like