ZuoTi.Pro
Question

2. Design an Online booking form of any Car Companies. (12 marks)  Set a heading...

2. Design an Online booking form of any Car Companies. (12 marks)
 Set a heading that describes the form.
 Use table to design the form.
 Use at least six(6) form fields. Set any attributes that are suitable for each field. For text input
field, include other attributes (not limited to name only).
 Use Cascading Style Sheets (CSS) to style the page. Use ID or Class selector for the CSS.
 Set a form validation for at least four (4) fields using JAVASCRIPT. If the form fields are empty,
display an alert message and return false to prevent the form from being submitted.
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Code:

<!doctype html>
<html>
<head>
<script>
function validateForm(){
<!-- Fetching the value filled in all the form fields-->
var first = document.getElementById("first").value;
var last = document.getElementById("last").value;
var email = document.getElementById("mail").value;
var number = document.getElementById("number").value;
var address = document.getElementById("address").value;
var type = document.getElementById("option").value;
<!--Checking if all the fields are filled or not -->
if(first=="" || last=="" || email=="" || number=="" || address=="" || type==""){
alert("Please fill all the fields");
return false;
}
<!--Validating the first name-->
if(!first.match("[A-Za-z]+")){
alert("Please provide correct first name");
return false;
}
<!--Validating the last name-->
if(!last.match("[A-Za-z]+")){
alert("Please provide the correct last name");
return false;
}
<!--Validating the phone number-->
if(!number.match("[0-9]{10}")){
alert("Please provide correct number with the required pattern");
return false;
}
<!--Validating the address on avoiding the special character-->
if(!address.match("[A-Za-z\d" ]")){
alert("Please provide a valid address without any special characters");
return false;
}
return true;
}
</script>
<style>
#body{
background-color:yellow;
color:red;
}
</style>
</head>
<body id="body">
<center>
<h1>Online Car Booking</h1>
<form onsubmit="return validateForm()" method="post">
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td><input type="text" placeholder="First Name" id="first"/></td>
<td><input type="text" placeholder="Last Name" id="last"/></td>
</tr>
<tr>
<td><input type="email" placeholder="email" id="mail"/></td>
</tr>
<td>Phone</td>
</tr>
<tr>
<td><input type="tel" placeholder="123-456-7890" id="number"/></td>
</tr>
<tr>
<td>Address</td>
</tr>
<tr>
<td><textarea cols="20" rows="5" id="address"></textarea></td>
</tr>
<tr>
<td>Vehicle</td>
</tr>
<tr>
<td>
<input list="type" id="option"/>
<datalist id="type">
<option>Mini</option>
<option>Micro</option>
<option>SUV</option>
</datalist>
</td>
</tr>
</tr>
<tr>
<td><input type="submit" value="Submit"/></td>
<td><input type="reset" value="Reset"/></td>
</tr>
</table>
</form>
</center>
</body>
</html>

Code Screenshot:

<! doctype html> <html> <head> <script> function validateForm() { <!-- Fetching the values filled in all the form fields --></script> <style> #body{ background-color: yellow; color:red; } #first{ color: red; } 35 36 37 - 38 39 40 41 42 43 44 45 46 470 <tr> 71 <td>Address</td> 72 </tr> 73 <tr> 74 <td><textarea cols=20 rows=5 id=address></textarea></td> 75 </tr> 76 <t

Code Output:

Online Car Booking Name First Name Email Last Name email Phone 123-456-7890 Address Vehicle Submit Reset

about:blank This page says Please fill all the fields OK Email email Phone 123-456-7890 Address Vehicle Submit Reset

0 0
Add a comment
Know the answer?
Add Answer to:
2. Design an Online booking form of any Car Companies. (12 marks)  Set a heading...
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

  • Remember to include: A consistent design and color scheme An external CSS document to control these...

    Remember to include: A consistent design and color scheme An external CSS document to control these aspects CSS applied to a single page Use of inline styles A consistent navigation between parts of your site A minimum of 5-8 pages At least three external hyperlinks An email link with the subject filled in A form (it does NOT have to connect to a database because that is beyond the scope of this class) Properly placed images on at least three...

  • 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 html coding in notepad++ according to the requirments those are listed in the pictures....

    I need html coding in notepad++ according to the requirments those are listed in the pictures. The purpose of this assignment is to figure out the designing and development of HTML forms with CSS and interaction between users and forms by using the Javascript script language. Below Student Registration Form views some form inputs entered by users and shows in the form as a response. Resources: All posted class documents and lab practices will help to complete this assignment. Student...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • 2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...

    2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...

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

  • For milestone #1, we will start the CARIT site with three static HTML pages and a...

    For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...

  • In Problem Set 7 you designed and implemented a Message class. This time, let's design and...

    In Problem Set 7 you designed and implemented a Message class. This time, let's design and implement a Mailbox class in a file named Mailbox java. Do the following with this class • You may use the Message class from PS 7. You will have to add new features to the Message class from PS 7 as you work through this problem. You are welcome to start with my sample solution if you wish • Suppose there are multiple mail...

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