I apologize if I dont do something correct hear but I was wondering if I could get some help on my errors and warnings with my html code. My code and functionality of my site is working as intended however I have quite a few errors listed.
I ran my code listed below through: https://validator.w3.org/#validate_by_input
it came back with 14 errors or warnings. I realize this is alot so any help will be appreciated here.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Chapter 4</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/Lab4.css" />
</head>
<body>
<form method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80"/>
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61">
</textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" >
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: <br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: <br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: <br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: <br/>
<input type="time" name="time" />
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Labels need a closing tag (which none of yours have!). Change:
<label>Rate this photo: <br/> to <label>Rate this photo: </label><br/>
<label>Color Collection: <br/> to <label>Color Collection: </label><br/>
<label>Date Taken: <br/> to <label>Date Taken: </label><br/>
label>Time Taken: <br/> to label>Time Taken: </label><br/>
You've also missed a > on your closing div on line 111 - change </div to </div>
There are also some warnings regarding your input types. I would ignore these as long as your browser supports them. Other than that, you're good to go!
The Validator does give you the reasons why your code does not validate, but perhaps you don't quite understand (we all have to start somewhere), so here goes:
You've wrapped <label>, <select> and <input> elements in <p> tags. That's not good markup structure, so you ought to remove the <p> tags.
There are some <label> tags that need a closing </label> tag.
There is also a </div> tag without it's closing >.
The Time <input> type is probably not ready for general use yet:
http://caniuse.com/#search=time
Deal with those and you should be very close to validating. Hope that helps.
Related
Here is a sample code I got from my textbook and for some reason it's not displaying correctly. I just can't find the error.
It only show the second input text field "surname" and not the first input text "First name" also.
<html>
<head><title>Holiday Program</title></head>
<body style="background-color:cyan">
<form action="HolidayChoice.jsp"> <!--also try this with method="post"-->
<center>
<table style="background-color:lightblue”>
<tr>
<td>First Name<input type="text" name="clientFirstName"></td>
<td>Surname<input type="text" name="clientSurname"></td>
</tr>
<tr>
<td>Location :<br/>
<input type="radio" name="location" value="ocean"
checked=”true”>Ocean<br/>
<input type="radio" name="location" value="lake">Lake<br/>
<input type="radio" name="location" value="nature">
Nature Reserve<br/>
<input type="radio" name="location" value="casino">Casino<br/>
</td>
<td>Accommodation Type :<br/>
<input type="checkbox" name="hotel" value="1">Hotel<br/>
<input type="checkbox" name="camping" value="1">Camping<br/>
<input type="checkbox" name="caravan" value="1">Caravan<br/>
<input type="checkbox" name="bungalow" value="1">Bungalow
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</center>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
You're using ” instead of " at line 6
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 have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.name {
width: 130px;
}
</style>
</head>
<body>
<h1> Test </h1>
<form>
<fieldset class="name">
<label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
<label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
</fieldset>
<br />
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
I want to make the the Free text and rank go next to the fieldset name (with some space) and the button to be in the middle of the page.
How can I make it work?
For the previous code I want to make this part to be next to the fieldset:
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
And the submit button be and the middle of the page.
Thank you in advance.
I did this really easily with some searches like "Put two divs next to each other" and "Center a div".
http://pastebin.com/SLQfGpQC
I am about to create a simple HTML table. I'd like some of the cells to dont change their width, not even if the available space for the table increases (eg: higher resolution).
I have created a JSF with my code. My problem is that if I move the vertical separator all the way to the left the column with the delete button starts to get wider instead of keeping its size.
Please help me out how can I do it.
Thanks!
<!DOCTYPE HTML>
<html lang="en-US">
<title>User Management</title>
<body>
<table cellspacing="0" border="1" style="width:80%;">
<tr>
<td>
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
<form action="/link2/" method="post">
<td style="margin:10px;max-width:60px;">
<input type="text" name="id" value="1" style="display:none" />1</td>
<td style="margin:10px;">
<input type="text" name="username" value="1" style="display:none" />johnd</td>
<td style="margin:10px;">
<input type="text" name="firstname" value="John" style="width: 80px;" maxlength="10" required />
</td>
</form>
</tr>
</table>
</body>
</html>
Just assign some small width for the TD of your button like below.
<td width="10">
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
Fiddle Demo
I'm getting 2 errors:
end tag for "FORM" omitted, but its declaration does not permit this:
and
end tag for element "FORM" which is not open:
but I thought I closed both of them properly.
html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Incident Form </title>
<link rel="stylesheet" href="http:...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="header">
Incident Form
</div>
<div class="t1">
<form action="connect_database.php" method = post>
<p>
<br><br>
<ins>Be sure to fill in all of the fields</ins>
<br><br><br><br>
</p>
<p>
Choose the type of incident<br>
<br>
</p>
<p>
<input type="radio" name="type" value="afs"> Afs<br>
<input type="radio" name="type" value="db"> Database<br>
<input type="radio" name="type" value="cs"> Computer systems<br>
<input type="radio" name="type" value="pw"> Password<br>
<input type="radio" name="type" value="hw"> Hardware<br>
<input type="radio" name="type" value="other"> Other<br>
<br><br><br>
</p>
<p>
Describe the incident<br><br>
<textarea rows="6" cols="20" name="inc"></textarea><br><br>
</p>
<p>
Would you also like to receive an email copy of your form summary?
<br><br>
</p>
<p>
<input type="radio" name="yesno" value="yes"> Yes<br>
<input type="radio" name="yesno" value="no"> No<br>
<br><br>
<input type="submit" name = "submit1" value= "Submit Incident">
</p>
</div>
</form>
</body>
</html>
Just switch your div and form tag.
You're opening the div:
<div class="t1">
then opening the form:
<form action="connect_database.php" method = post>
then closing the div:
</div>
and closing the form:
</form>
Instead the correct order is open the div, open the form, closing the form, closing the div.
Tags are contained in each others like in a Matryoshka doll.
You have wrong nestings of your outer div (class="t1") and form. It should be like this at the end:
</form>
</div>
</body>
and not:
</div>
</form>
</body>
because the div tag is opened before the form.
You're closing the last <div> in the wrong place. Move it bellow the </form> tag.
Also, try to use and CSS instead of and
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Incident Form </title>
<link rel="stylesheet" href="http:...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="header">
Incident Form
</div>
<div class="t1">
<form action="connect_database.php" method = post>
<p>
<br><br>
<ins>Be sure to fill in all of the fields</ins>
<br><br><br><br>
</p>
<p>
Choose the type of incident<br>
<br>
</p>
<p>
<input type="radio" name="type" value="afs"> Afs<br>
<input type="radio" name="type" value="db"> Database<br>
<input type="radio" name="type" value="cs"> Computer systems<br>
<input type="radio" name="type" value="pw"> Password<br>
<input type="radio" name="type" value="hw"> Hardware<br>
<input type="radio" name="type" value="other"> Other<br>
<br><br><br>
</p>
<p>
Describe the incident<br><br>
<textarea rows="6" cols="20" name="inc"></textarea><br><br>
</p>
<p>
Would you also like to receive an email copy of your form summary?
<br><br>
</p>
<p>
<input type="radio" name="yesno" value="yes"> Yes<br>
<input type="radio" name="yesno" value="no"> No<br>
<br><br>
<input type="submit" name = "submit1" value= "Submit Incident">
</p>
</form>
</div>
</body>
</html>
i had this kind of bug and couldn't also validate my document... the best way in this case is to put the open form Tag directly after the open ody tag and the closing form Tag directly before the closing body Tag. something like this:
<body>
<form ....>
....
</form>
</body>
And i would use the fieldset, label and legen etc. Adding structure to forms: the FIELDSET and LEGEND elements
Amin Kasbi