CODEWITHSUNDEEP
html
user3323950
user3323950

Reputation: 207

How to reset multiple forms at once with one button

Okay guys, im starting to learn HTML so im a newbie at the moment. I wrote this code to practice my input types (such as password, email, text etc). I would like to know how I can reset the whole form with one button. E.g.:

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

The above code should be able to reset the whole form.

In my code, I have multiple forms and fieldsets:

<! DOCTYPE HTML>
<html>
<head>
<title>Tutorial 5 </title>
</head>

<body>    
<form>
<fieldset>
<legend>Personal Details</legend>

<p><label for="name">First name:</label>
<input id="name" name="name" type="text" /></p>

<p><label for="surname">Surname:</label>
<input id="surname" name="surname" type="text" /></p> 

<p><label for="dob">Date of Birth:</label>
<input id="dob" name="dob" type="text" size="5" /></p>

<p><label for="email">E-Mail address: </label>
<input id="email" name="email" type="email" /></p>

<p><label for="address">Address:</label>
<textarea id="address" name="address" type="text" rows="5" cols="30"></textarea> </p>

<p><label for="postcode">Postcode:</label>
<input name="postcode" id="postcode" type="text" size="5"></input> </p>
 </fieldset>
 </form>


<form>
<fieldset>
<legend> Password and PIN </legend>

<p><label for="password"> Password </label>
<input id="password" name="password" type="password"></input> </p>

<p><label for="passwordRetype">Retype Password</label>
<input id="passwordRetype" name="passwordRetype" type="password"></input> </p>

<p><label for="memorableQuestion"> Memorable question</label>
<select id="memorableQuestion" name="memorableQuestion">
<option value="ChildhoodFriend"> Who was your childhood friend? </option>
<option value="Street"> Whats the street you grew up in? </option>
<option value="Food"> Whats your favorite food? </option>
</select> </p>

<p><label name="answerToQ"> Answer to memorable question: </label>
<input id="answerToQ" name="answerToMemorableQuestion" type="text"</input> </p>
</fieldset>
</form>

<form>
<fieldset>
<legend>Feedback</legend>

<p><label for="radio"> Where did you hear about us mostly?</label>
<p id="radio">

<input type="radio" name="feedback" value="social_media">Social Media<br>
<input type="radio" name="feedback" value="advertisement">Advertisement<br>
<input type="radio" name="feedback" value="Radio_ad">Radio Advertisement<br>
</p></p>

<p><label for="rate">Rate out service out of 10: </label>
<input id="rate" name="rate" type="text" size="2" /></p>
</fieldset>
</form>
</body>
</html>

As well as that, when I output it, I would like the text field to be aligned properly. (e.g. the textfields are all under each other and they all start at the same point... if you know what I mean.. is it possible to achieve this through float?)

Upvotes: 0

Views: 1790

Answers (2)

Schvenn
Schvenn

Reputation: 11

After trying every method possible, I found this to be the simplest:

window.open(document.URL,'_self');

Upvotes: 1

James Simpson
James Simpson

Reputation: 1150

Typically you would use a single form to capture input with the submit / reset actions within it.

This is because the FORM element groups together the values within them in order to post back to the server or action of the form.

Therefore unless you expect the user to interact with the forms independently of each other then it makes little sense to split the form up. By combining into a single form the reset button will work.

For presentation purposes you should be using something like DIV elements or whatever makes sense for the layout you are trying to create.

Upvotes: 0

Related Questions