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">
Related
The data sent is not being submitted using through url. When I click submit, the url does not have the key value pairs.Note: I have not named anything in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assignment1.19</title>
</head>
<body>
<h1>Register</h1>
<form class="" action="#" method="GET">
<div class="">
<label for="hi" >First Name:</label>
<input id="hi" type="text" name="" value="" placeholder="Jane" name= "hello" required autofocus>
<label for="no">Last Name:</label>
<input id="no" type="text" name="" value="" placeholder="Doe"name= "naw" required>
<br>
</div>
<div class="">
<button type="submit" name="button">Submit</button>
</div>
</form>
</body>
</html>
You have two name attributes and no value values.
You also should have whitespace separating each attribute.
Also, your action should point to a URL that handles the request.
I just started working with forms and inputs http://www.w3schools.com/html/html_forms.asp and they work fine as far as I can tell, but they cause a load of errors when I run it through W3C validation service. http://validator.w3.org/#validate_by_input
The code validates fine when I remove the forms and inputs. The only thing I can think of, is that the forms and inputs are not entirely html, as I don`t yet know what the name= does
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>login</title>
<link type='text/css' rel='stylesheet' href='css/login.css'>
</head>
<body>
<div id ="header">
<h1>log in</h1>
</div>
<div id ="name">
<form>
editors name: <input type="text" name="name">
</form>
</div>
<div id="pswd">
<form>
password: <input type="password" name="pwd">
</form>
</div>
<div id="options">
<h3>Or</h3>
</div>
<div id="wayBack">
Return to page
</div>
</body>
</html>
I think what you're trying to achieve is this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>login</title>
<link type='text/css' rel='stylesheet' href='css/login.css'>
</head>
<body>
<div id ="header">
<h1>log in</h1>
</div>
<form action="/">
<div id ="name">
editors name: <input type="text" name="name">
</div>
<div id="pswd">
password: <input type="password" name="pwd">
</div>
</form>
<div id="options">
<h3>Or</h3>
</div>
<div id="wayBack">
Return to page
</div>
</body>
</html>
The fields should be contained with in one form so that they get submitted together. The errors were raised because it's not valid to have text (editors name / password) as a direct child of a FORM element
A more semantic solution would be...
<form action="/">
<div>
<label for="input_name">editors name:</label>
<input type="text" name="name" id="input_name" />
<p>It's completely valid to have text here inside a P tag</p>
<label for="input_password">password:</label>
<input type="password" name="password" id="input_password" />
</div>
</form>
This would allow the user to click on the label in order to focus the corresponding form field
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.
This is the sample html document. The datalist tag is added for the fave input text box. But it does show up. Any ideas?
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="description" content="A simple example"/>
</head>
<body>
<form method="post" action="WorkingWithFormsChapter.html" target="_blank">
<label for="fave">Enther your favourite fruit</label>
<input name="fave" autofocus="true" list="fruitslist"/>
<br/>
<label for="name">Enter your name</label>
<input name="name" placeholder="Your name please" />
<button>Submit Vote</button>
</form>
<datalist id="fruitslist">
<option value="Tasty Apples">Apples</option>
<option value="Juicy Oranges">Juicy Oranges</option>
</datalist>
</body>
</html>
It works; the support for it in some browsers at the moment is not good however.
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