ZuoTi.Pro
Question

Develop a form in the HTML document containing the following input entries: First Name (use single-line...

Develop a form in the HTML document containing the following input entries: First Name (use single-line text input) Last Name Gender (use radio buttons) Email Address Telephone Number Sport Interests (use checkbox with at least four different sports items) Preferred Contact Time (use select boxes with Anytime, Morning, Afternoon, and Evening as the four items) Comments (use textarea control) Your page must also include submit and reset buttons! Also use CSS to stylze it and use javascript to validate the form

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Here a new web page with name "1htmlForm.html" is created, which contains following code.

1htmlForm.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>HTML Form</title>

<meta charset="UTF-8">

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

<!-- <script> is used to refer to external javascript file -->

<script src="validation.js"></script>

<style>

/ style rule for label /

label{

font-size: 20px;

}

/ style rule for caption /

caption{

font-size: 30px;

font-weight: bold;

}

/ style rule for textbox /

input[type='text'],select,textarea{

width:250px;

height: 30px;

font-size: 18px;

}

/ style rule for submit and reset button /

input[type='submit'],input[type='reset']

{

width:120px;

height: 30px;

}

</style

</head>

<body>

<form onsubmit="return validate()">

<table>

<caption>Registration Form</caption>

<tr>

<td><label for="firstName">First Name</label></td>

<td><input type="text" id="firstName" placeholder="Enter First Name"></td>

</tr>

<tr>

<td><label for="lastName">Last Name</label></td>

<td><input type="text" id="lastName" placeholder="Enter Last Name"></td>

</tr>

<tr>

<td><label for="gender">Gender</label></td>

<td>

<input type="radio" name="gender">Male

<input type="radio" name="gender">Female

</td>

</tr>

<tr>

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

<td>

<input type="text" id="email" placeholder="Enter Email">

</td>

</tr>

<tr>

<td><label for="telephoneNumber">Telephone Number</label></td>

<td>

<input type="text" id="telephoneNumber" placeholder="Enter telephone number">

</td>

</tr>

<tr>

<td><label for="sports">Sport Interests</label></td>

<td>

<input type="checkbox" name="sports">Cricket

<input type="checkbox" name="sports">Football

<input type="checkbox" name="sports">Tennis

<input type="checkbox" name="sports">Judo

</td>

</tr>

<tr>

<td><label for="contactTime">Preferred Contact Time</label></td>

<td>

<select id="contactTime">

<option value="select" selected>--select Time--</option>

<option value="Anytime">Anytime</option>

<option value="Morning">Morning</option>

<option value="Afternoon">Afternoon</option>

<option value="Evening">Evening</option>

</select>

</td>

</tr>

<tr>

<td><label for="comments">Comments</label> </td>

<td><textarea id="comments" rows="8" cols="20" placeholder="Enter Comment"></textarea></td>

</tr>

<tr>

<td></td>

<td>

<input type="submit" value="Submit" />

<input type="reset" value="clear" />

</td>

</tr>

</table>

</form>

</body>

</html>

Screen 2:Screen when fields are empty

Screen 3:Screen when email is invalid

Screen 4:Screen when all fields are valid

0 0
Add a comment
Know the answer?
Add Answer to:
Develop a form in the HTML document containing the following input entries: First Name (use single-line...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • given below are the project description and their Html and css files i need javascript according to the project and other files!

    HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...

  • Develop an HTML form that could be used to enter your book information (Books, Authors, and...

    Develop an HTML form that could be used to enter your book information (Books, Authors, and Publishers) start with the HTML/JavaScript template provided Expand upon it! What field information would you enter into a system? Have your form use more then just character text fields ... radio buttons, pick lists, and other elements make your form easier to use and you don't need to do lots of JavaScript checks. What fields would be mandatory ... which could be left blank?...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

    Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned. Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab....

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • the is my HTML and CSS code. I didn't attach the image or the CSS file...

    the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit. two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript both should be using javascript requirement: our professor told us not to use <div> or alert. thank you for your help <!DOCTYPE html> <!-- I used w3school for the formatting...

  • The first script is validate.sh. This is a simple form validation script that will be used...

    The first script is validate.sh. This is a simple form validation script that will be used to verify the inputs given. Normally, this would be done to validate input from a website or another program before entry into a database or other record storage. In this case, we will keep it simple and only focus on the input validation step. In particular, the script should prompt the user for four values: first name, last name, zip code, and email address....

  • Design an original, professional web site following the specifications listed below. This web sit...

    Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT