In: Computer Science
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
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>