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
Related
I'm new to coding just learning HTML and CSS so there is probably a simple solution I cannot see.
I have written HTML code and linked it to my CSS file in Visual Studio Code. I have test the link in the editor and it worked and I have also checked my class tags.
The weird thing is the CSS is displayed in browser if I run it in Code Pen with no problems however this is not the case in VSC.
Any ideas would be really helpful,
Following is my code blocks,
HTML
<!DOCTYPE html>
<html>
<head>
<title> Designer Form </title>
<meta charset=”utf-8”>
<link type="stylesheet" href="designerform.css">
</head>
<center> <h1>Fill out this form</h1> </center>
<body>
<form class = "all">
<!--Input for a text box-->
<form1>
<h2> 1.</h2>
<label for="Name">Name </label>
<input id="Name" type="text" name="Name">
</form1>
<!--Input for a number -->
<form2>
<h3> 2. </h2>
<label for="Age"> Age </label>
<input id="Age" type="number" name="Age">
</form2>
<!--Input for telephone-->
<form3>
<h4> 3. </h4>
<label for="telephone">Telephone</label>
<input id="telephone" type="tel" name="Telephone">
</form3>
<!--Input for email-->
<form4>
<h5> 4. </h5>
<label for="email"> Email:</label >
<input id="email" type="email" name= "Email">
</form4>
<!--Input for calender-->
<form5>
<h6> 5. </h6>
<label for="calender"> Calender</label>
<input id="calender" type="month" name= calender>
</form5>
<!-- Input for search -->
<form6>
<h7> 6. </h7>
<label for="search">search</label>
<input id="search" type="search" name="search">
</form6>
<!--Text area for longer form responses-->
<form7>
<h8> 7. </h8>
<label for="long response"> Tell me more...</label>
<textarea id="long response" name= "long response"></textarea>
</form7>
<!--Predertimed responses-->
<form8>
<h9> 8. </h9>
<label for= "Fav colours"> What is your colour?</label>
<select id= "Fav colours">
<option value="colorRed"> Red</option>
<option value="colorBlue"> Blue</option>
<option value="colorYellow"> Yellow</option>
</select>
</form8>
<!--Radio inputs-->
<input type ="submit" value="Finish">
</form>
</body>
</html>
and CSS
.all {background-color: rgb(238, 129, 238);
font-family: fantasy; }
h1 {text-align: center;
color: #FFF;
background-color: rgb(102, 155, 204); }
Thanks in advance for your time.
the problem is with your link tag stylesheet should be rel not type.
yours <link type="stylesheet" href="designerform.css">
and should be like this <link rel="stylesheet" href="designerform.css">
You have a typo in your css link. Should be rel="stylesheet", not type;
<link rel="stylesheet" href="designerform.css">
Check out the following link for proper css linkage - How to add CSS
can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?can i get all this information without any php code or script on an other web form?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Web From</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<form action="" method="POST">
<ul style="list-style-type:none;">
<a name="top">
<fieldset>
<legend>
<h3>Basic Infromation</h3>
</legend>
<li> Image
<input type="image" name="image">
</li>
<br>
<li>
<input type="button" name="btnUploadImage">
</li>
<br> First Name:
<input type "text" name="firstName" size="30" maxlength="25">
<span>
Last Name:
<input type "text" name="lastname" size="30" maxlength="25">
</span>
</li>
<br>
<li>
<br>CNIC:
<input type="number" name="cnic" size="30" maxlength="25">
</li>
<br>
<li> Date Of Birth:
<input type="date" name="dateOfBirth" size="30" maxlength="25">
</li>
<br>
<li> Email:
<input type="email" name="email" size="30" maxlength="25">
</li>
<br>
<li>Address:
<textarea rows=”10” cols=”40” name=”address”> </textarea>
</li>
<br>
<br> Gender:
<input type="radio" name="gender" value="male" checked> Male |
<input type="radio" name="gender" value="female"> Female |
<input type="radio" name="gender" value="other"> Other
<li></li>
<br>
<input type="submit" value="Submit">
</fieldset>
</ul>
</form>
Back to top
</body>
</html>
Unfortunately, your question is not very clear.
I assume that you want the input data of the form above to be displayed in another form on a different page, when the submit button is clicked.
If so, yes, you can get this information there using JavaScript.
What you would have to do to get there:
Send form data via URL parameters (so something like targetpage.html/?lastname=John&cnic=4545and so on
On the target page you'd have to implement JavaScript which gets those URL parameters (probably call them by name and store them in a variable to use them)
Use the single parameters to populate the input of your form on this page or do whatever you want with it.
This has of course downsides. E.g. JavaScript could be disabled or manipulated, so you should be careful.
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.
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
The form is displayed on the browser, but when I roll my cursor over the text fields, it just doesn't take the input. How is this caused and how can I solve it?
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!--> <div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div><!-->
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
</html>
You are overlaying your form with a div, that blocks the input. Remove it:
<html>
<head>
<title>Chemicals.ltd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2> Welcome to TOXIC TRADERS ! </h2>
<p>We trade chemicals , for industrial or lab use.<br> Please enter Relevant info in the form </p>
<form name="Details" action="/ChemControl" method="POST">
Chemical Name: <input type="text" name="Chemical"><br>
Hazard Level(No.): <input type="text" name="Hazard type"><br>
Lab/Company Name: <input type="text" name="Lab Name" ><br>
Serial No.: <input type="text" name="Serial No."><br>
<input type="submit" value="Send Info">
</form>
</body>
Your html comments are invalid
should be
<!-- <html not displayed> -->
Not
<!--> <html not displayed> <!-->
Result is the html that it appears you are trying to comment out is masking the form
Your div tag with 100% height and 100% width has covered the entire view port like a modal form, hence the area beneath it has become non-clickable. Remove the height and width from tag like below:
<div style='position:absolute;z-index:0;left:0;top:0;'>
<img src='C:\Users\Dell\Downloads\chem.jpg' style='width:100%;height:100%' alt='[]' />
</div>
Your font size is probably set to zero.
Add this to your css style file:
input {
font-size: 10pt;
}
Or add the style directly on the HTML tag:
<input style="font-size: 10pt;" type="submit" value="Send Info">