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