Using HTML5 1. Create a registration form. Make sure to line up the fields so it
ID: 670405 • Letter: U
Question
Using HTML5
1. Create a registration form. Make sure to line up the fields so it’s easy for the user to locate
and enter the data.
2. Configure the form field to email you the results. You may need to review this in the lesson.
3. Fields to include:
a. First and last name, street address, city, state, zip code
b. Email address and phone number, Username and password
c. How did you hear about this site? Use a dropdown list for this one.
d. Number of distinct specifies of birds you have seen
e. Favorite bird
f. Current membership in the Audobon Society? Yes or No – Use radio buttons.
_____________________________________________________
Process a form using JavaScript
1. Make sure to provide direction on the form for what is required.
2. Make sure to comment in the JS file what each of the steps does.
3. Write out the JavaScript to verify that all of the fields have valid data.
4. Store the JavaScript in an external js file and link it to the form page you just created.
a. The form fields should never be empty.
b. They are all text data except number of birds viewed.
c. Username is 4 to 20 characters.
d. Email is a valid email address, formatted as an email address.
e. Password is 10-20 characters, which consist of one or more uppercase, lowercase,
special characters and numbers.
E) Display the results to the user after the form is submitted.
Explanation / Answer
// a.html
<html>
<head>
<title> Registration</title>
<script src="a.js"></script>
</head>
<body>
<form name="myForm">
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
Street Address:<br>
<input type="text" name="streetAddress"><br>
City:<br>
<input type="text" name="city"><br>
State:<br>
<input type="text" name="state"><br>
Zip:<br>
<input type="text" name="zip"><br>
Email-id:<br>
<input type="email" name="email"><br>
Phone No.:<br>
<input type="number" name="phone"><br>
Username:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="password"><br>
How did you hear about this website?<br>
<select name="source">
<option value="internet">Internet</option>
<option value="friends">Friends</option>
<option value="ads">Ads</option>
</select>
No. of distinct species of birds you have seen:<br>
<input type="number" name="numBirds"><br>
Favourite bird:<br>
<input type="text" name="favBird"><br>
Current membership in the Audobon Society?<br>
<input type="radio" name="membership" value="yes">Yes
<input type="radio" name="membership" value="female">No<br>
<input type="submit" name="submit"><br>
</form>
</body>
</html>
// a.js
function validateForm() {
var firstname = document.forms["myForm"]["firstname"].value;
if (firstname == null || firstname == "") {
alert("First name must be filled out");
return false;
}
var lastname = document.forms["myForm"]["lastname"].value;
if (lastname == null || lastname == "") {
alert("Last name must be filled out");
return false;
}
var streetAddress = document.forms["myForm"]["streetAddress"].value;
if (streetAddress == null || streetAddress == "") {
alert("Street address must be filled out");
return false;
}
var city = document.forms["myForm"]["city"].value;
if (city == null || city == "") {
alert("City must be filled out");
return false;
}
var state = document.forms["myForm"]["state"].value;
if (state == null || state == "") {
alert("State must be filled out");
return false;
}
var zip = document.forms["myForm"]["zip"].value;
if (zip == null || zip == "") {
alert("Zip must be filled out");
return false;
}
var email = document.forms["myForm"]["email"].value;
if (email == null || email == "") {
alert("Email must be filled out");
return false;
}
else{
var re = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i;
if(!re.test(email)){
alert("Invalid email id");
return false;
}
}
var phone = document.forms["myForm"]["phone"].value;
if (phone == null || phone == "") {
alert("Phone number must be filled out");
return false;
}
var username = document.forms["myForm"]["username"].value;
if (username == null || username == "") {
alert("Username must be filled out");
return false;
}else{
if(username.length < 4 || username.length > 20){
alert("Username must be between 4 to 20 characters long");
return false;
}
}
var password = document.forms["myForm"]["password"].value;
if (password == null || password == "") {
alert("Password must be filled out");
return false;
}
else{
if(password.length < 10 || password.length > 20){
alert("Password must be between 10 to 20 characters long");
return false;
}
}
var countLower = 0, countUpper = 0, countSpl = 0, countNum = 0;
for(var i = 0; i < password.length; i++){
if(password[i] >= 'a' && password[i] <= 'z') countLower++;
if(password[i] >= 'A' && password[i] <= 'Z') countUpper++;
if(password[i] == '_' && password[i] == '@' || password[i] == '.') countSpl++;
if(password[i] >= '0' && password[i] <= '9') countNum++;
}
if(countUpper < 1 || countLower < 1 || countSpl < 1 || countNum < 1) return false;
return true;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.