USA: +1 (725) 712-1730 
Sign in
Below are the specific requirements: Create an HTML form that includes at least the following: middot A text element for the users’ first and last name A text element for their phone number A text element for their email, 1 set of radio buttons or checkboxes 1 text area Submit button Use any CSS style that you have learned or that you research on your own to style the HTML elements (no specific requirements just try out a few options from the links in the reading) Add in Javascript to validate the following when the form is submitted: The text areas are not blank The phone number is the right number of digits (7 or 10) The email is a valid email address
Expert Answer
RegistrationForm.html
———————————–
<!DOCTYPE html>
<head>
<title>Registration Form</title>
<style>
h1 { color: red; padding: 10px; text-decoration: underline; }
.defaultTextBox {
padding: 0;
height: 20px;
position: relative;
left: 0;
outline: none;
border: 1px solid #cdcdcd;
border-color: rgba(0,0,0,.15);
background-color: white;
font-size: 16px;
.defaultTextArea {
padding: 0;
height: 100px;
position: relative;
left: 0;
outline: none;
border: 1px solid #cdcdcd;
border-color: rgba(0,0,0,.15);
background-color: white;
font-size: 16px;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}
</style>
</head>
<body>
<script>
function formsubmission(){
alert(“Hi”);
if(ValidateEmail()){
if(textAreaValidation()){
if(phoneNumberValidation()){
return true;
}else{
return false;
}
}else{
return false;
}
}
}
function ValidateEmail()
{
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(registraionForm.emailTxt.value))
{
return (true)
}
alert(“You have entered an invalid email address!”)
return (false)
}
function textAreaValidation(){
var comments = registraionForm.comments.value;
alert(comments.length)
if(comments.length == 0){
alert(” comments cannot be blank”);
return (false);
}else{
return (true);
}
}
function phoneNumberValidation(){
var phoneNumber = registraionForm.PhoneTxt.value;
alert(phoneNumber.length)
if( isNaN(phoneNumber) && ( phoneNumber.length == 7 || phoneNumber.length == 10)){
return (true);
}else{
alert(“You have entered an invalid phone number”);
return (false);
}
}
</script
<h1 >Welcome</h1>
<form name=”registraionForm”>
<Table>
<TR>
<TD>
<Table border=”0″>
<TR>
<TD><label>First Name</label></TD>
<TD><input type=”text” name=”FirstNameTxt” class=”defaultTextBox” /></TD>
</TR>
<TR>
<TD><label>Last Name</label></TD>
<TD><input type=”text” name=”LastNameTxt” class=”defaultTextBox” /></TD>
</TR>
<TR>
<TD><label>Phone Number</label></TD>
<TD><input type=”text” name=”PhoneTxt” class=”defaultTextBox” /></TD>
</TR>
<TR>
<TD><label>Email</label></TD>
<TD><input type=”text” name=”emailTxt” class=”defaultTextBox” /></TD>
</TR>
<TR>
<TD>Gender</TD>
<TD>
<input type=”radio” name=”sex” value=”F” id=”sex_f” checked><label for=”sex_f” >Female</label>
<input type=”radio” name=”sex” value=”M” id=”sex_m” ><label for=”sex_m” >Male</label>
</TD>
</TR>
<TR>
<TD>Comments</TD>
<TD>
<textarea name=”comments” rows=”4″ cols=”50″ class=”defaultTextArea” >Describe Yourself here</textarea>
</TD>
</TR>
<TR>
<TD> </TD>
<TD><input type=”submit” name=”formSubmit” value=”Submit” onclick=”formsubmission();”/></TD>
</TR>
</Table>
</TD>
</TR>
</Table>
</form>
</body>
</html>
———————— End—————————–
Description:
i have added all the html tag , Java script methods and css tag in one file. so that you can easily relate the things otherwise you can sperate out the code.
javascript methods cna be stored in .js file and css related stuff you can place in .css file.
