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?)
After trying every method possible, I found this to be the simplest:
window.open(document.URL,'_self');
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.
Related
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.
Looking for answers for HTML5 ONLY, no JS solutions please!
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. The question is:
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page.
The form in question is below, sorry for the shitpost aspects;
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
The SPECIFIC part I'm having trouble with is this bit right here:
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it.
I appreciate your help!
You have to change the oninput to onchange for input tags like this:
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
onchange="setCustomValidity('')"
updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.
Edit: Because of the time restriction of the project I just had to revert to a working copy of the code and redo all my work, but I would still like to know what the reason is for this for the future.
So, I've had this problem now for a little while, of one of the dags in this HTML file I've been working on where a from and div tags would get underlined by my editor (Komodo) saying something to the effect of "Unexpected End Tag (ignored). This wasn't causing much problems so I just ignored it...until the editor started highlighting the closing body tag with the same thing and the file doesn't actually work correctly (using JQM) anymore.
The thing I don't understand is that I haven't been touching the HTML AT ALL. In the past when this happened (as it has before), I just pulled a previous version from the repo I'm using and that would resolve the issue, but this time I haven't made a commit in a while and I really want to find a solution to this problem rather than a quick fix.
Here is a screenshot of the syntax error I'm getting via my editor:
Here is the HTML for the form, if it matters:
<div data-role="content">
<img src="img/logo.png" alt="RPG Tracker">
<form action="" method="post" id="addCharForm">
<fieldset data-role="controlgroup">
<label for="dateCreated">Date Created:</label>
<input type="date" name="dateCreated" id="dateCreated">
</fieldset>
<fieldset data-role="controlgroup">
<label for="charAge">Age:</label>
<input type="text" name="charAge" id="charAge" value="" class="required number">
</fieldset>
<fieldset data-role="controlgroup">
<label for="charName">Name:</label>
<input type="text" name="charName" id="charName" value="" class="required">
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose character gender:</legend>
<input type="radio" name="gender" id="radioMale" value="Male">
<label for="radioMale">Male</label>
<input type="radio" name="gender" id="radioFemale" value="Female">
<label for="radioFemale">Female</label>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charAttrs">Describe your character's <b>attributes</b> in this field:</label>
<textarea id="charAttrs" name="charAtts"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charSkills">Describe your character's <b>skills</b> in this field:</label>
<textarea id="charSkills" name="charSkills"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charBio">Character Biography:</label>
<textarea id="charBio" name="charBio"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charRating">Rate Your Character:</label>
<input type="range" name="charRating" id="charRating" value="100" min="0" max="100">
</fieldset>
<input type="reset" value="Reset">
<input type="submit" value="Submit Character" data-theme="b">
</form>
</div>
As requested, here's the full html:
http://pastebin.com/tsE0MuP7
The input and img tags are self closing, so I suggest closing them all and seeing if that fixes it. (I suspect it won't, but it's worth a try).
e.g.
<img src="img/logo.png" alt="RPG Tracker" />
and
<input type="date" name="dateCreated" id="dateCreated" />
The issue could be elsewhere in the file too, so a copy of the entire HTML would be preferable. It will probably be an open tag somewhere (e.g. using <div> instead of </div>).
<fieldset data-role="controlgroup">
<label for="charName">Name:</label>
<input type="text" name="charName" id="charName" value="" class="required">
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose character gender:</legend>
<input type="radio" name="gender" id="radioMale" value="Male">
<label for="radioMale">Male</label>
<input type="radio" name="gender" id="radioFemale" value="Female">
<label for="radioFemale">Female</label>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charAttrs">Describe your character's <b>attributes</b> in this field:</label>
<textarea id="charAttrs" name="charAtts"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charSkills">Describe your character's <b>skills</b> in this field:</label>
<textarea id="charSkills" name="charSkills"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charBio">Character Biography:</label>
<textarea id="charBio" name="charBio"></textarea>
</fieldset>
<fieldset data-role="controlgroup">
<label for="charRating">Rate Your Character:</label>
<input type="range" name="charRating" id="charRating" value="100" min="0" max="100">
</fieldset>
<input type="reset" value="Reset">
<input type="submit" value="Submit Character" data-theme="b">
</form>
</div>