Question

In: Computer Science

HTML document containing a form. The title bar should display “Voting Form”. The form should contain...

HTML document containing a form. The title bar should display “Voting Form”. The form should contain the following: Text boxes to accept the person’s name and e-mail address At least five radio buttons the user can use to vote for a candidate for some office. (You make up some names) Text box for write-in alternative Checkboxes with name and value attributes for these options: oThis is the first time I have voted online. o I have periodically voted online. o I always vote online. oOnline voting is not patriotic Submit Button Reset Button

Solutions

Expert Solution

Please find below the code. I have included detailed comments as well for your easy understanding.Have also included basic validation levels required while submitting the form.

Furthur , we can use various scripts(Java script) for more detailed validations of all the input fields.We may also use REGEX patterns in order to validate the email id of a user.

<!DOCTYPE html>
<html>
<body>

<!-- giving the form a header value -->
<h2>Voting Form</h2>

<!-- creating labels to add first name , last name and email address for the user. -->
<!-- basic validations such as "Required" for these fields have been added -->
<form id=form1 required/>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" required/><br><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" required/><br><br>
  <label for="email">Email Address:</label><br>
  <input type="text" id="email" name="email" required/><br><br>

<!--This is a nested form to ensure that alteast 1 candidate is selected before entire form submit-->
        <form>
<-- Radio buttons have been created to select a candidate-->
<!-- A user has to select an option and basic level validation has been added-->
  <p> Select Your Candidate</p>
  <input type="radio" id="cad1" name="candidate" value="cad1" required/>
  <label for="cad1">Harry</label><br>
  <input type="radio" id="cad2" name="candidate" value="cad2">
  <label for="cad2">Hermoine</label><br>
  <input type="radio" id="cad3" name="candidate" value="cad3">
  <label for="cad3">Ron</label><br>
  <input type="radio" id="cad4" name="candidate" value="cad4">
  <label for="cad4">Dumbledore</label><br>
  <input type="radio" id="cad5" name="candidate" value="cad5">
  <label for="cad5">Hagrid</label><br>

<!-- Providing the user an option for write-in alternative-->
  <p> Do you have a write-in alternative? Please provide your input </p>
  <label for="write"></label>
  <input type="text" id="write" name="write"><br><br>

        </form>


<!--creating checkboxes for user to select from-->
<!--multiple options can be selected here unlike the radio buttons where only 1 option has to be submitted-->

  <p> Please select options that are applicable to you</p>
  <input type="checkbox" id="option1" name="option1" value="First Time Voting Online">
  <label for="option1"> This is the first time I have voted online</label><br>
  <input type="checkbox" id="option2" name="option2" value="Periodically Voting Online">
  <label for="option2"> I have periodically voted online</label><br>
  <input type="checkbox" id="option3" name="option3" value="Always Voting Online">
  <label for="option3"> I always vote online</label><br>
  <input type="checkbox" id="option4" name="option4" value="Never Online">
  <label for="option4"> Online voting is not patriotic</label><br><br>

        <br><br>

<!--Creating submit and refresh buttons-->
<!--On submit the entire form should be submitted so pass the form id-->

  <button type="submit" form="form1">Submit</button>
  <button type="reset">Refresh</button>
  
 
  
</form>



</body>
</html>

venereology answered 1 year ago
Next > < Previous

Related Solutions

Write an HTML document to provide a form that collects familynames and telephonenumbers. The...
Write an HTML document to provide a form that collects family names and telephone numbers. The family name should start with a capital letter, followed by at least one lowercase letter, and not include any spaces or any other characters, and the length should not be more than 30 characters. The phone numbers must be in the format (ddd)-ddd-dddd. Write a PHP script that checks the submitted last name and the telephone number to be sure that they conform to...
This should be done in JavaScript. The HTML file should only contain an empty main tag....
This should be done in JavaScript. The HTML file should only contain an empty main tag. All other HTML on the page should be created with JavaScript. The JavaScript file should be a separate file.   Make an empty HTML file, put an empty main tag inside the body. In your JavaScript, use querySelector to get a reference to the main tag and save it in a variable named main. Look up three good jokes and store them as separate variables...
HTML Create a page of texts that uses inline elements. The page should contain a citation,...
HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.
I NEED TO CREATE A GUI INTERFACE USING TKINTER CONTAINING : Colors, Image, Button, Title bar,...
I NEED TO CREATE A GUI INTERFACE USING TKINTER CONTAINING : Colors, Image, Button, Title bar, and a Menu bar FOR THE QUESTION BELOW: PLEASE HELP PROGRAMMING LANGUAGE IS PYTHON Write a simple quiz game that has a list of ten questions and a list of answers to those questions. The game should give the player four randomly selected questions to answer. It should ask the questions one-by-one, and tell the player whether they got the question right or wrong....
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT