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
Related
I am making a sign-up page for my site. It looks like this
<!DOCTYPE html>
<html lang="en" height="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVC | Signup</title>
</head>
<body>
<div>
<form action="/signup" method="post" target="nothing">
<h1>Sign up for Post-it</h1>
<input type="text" name="name" placeholder="Your name">
<input type="text" name="usr" placeholder="Username" >
<input type="password" name="psd" placeholder="Password">
<button type="submit">Sign up for post-it</button>
</form>
</div>
<iframe name="nothing" style="display:none"></iframe>
</body>
</html>
But right now, you can create an account without a username or password. I tried the required attribute. It made something like this.
<!DOCTYPE html>
<html lang="en" height="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVC | Signup</title>
</head>
<body>
<form action="/signup" method="post" class="w-1/2 flex flex-col" target="nothing" onsubmit="alert('form submitted')">
<h1 class="text-xl text-center mb-5">Sign up for post-it</h1>
<input type="text" name="name" placeholder="Your name" required>
<input type="text" name="usr" placeholder="Username" required>
<input type="password" name="psd" placeholder="Password" required>
<button type="submit">Sign up for post-it</button>
<iframe name="nothing" style="display: none"></iframe>
</body>
</html>
This works, but the "please fill out this field" doesn't look that great. And if someone figures out how to bypass the required fields, that will do a lot of damage to my database. So is there a way to make sure the form isn't empty on the server side? Note: I'm also using ejs, so you can make error messages like this:
app.get('/error', (req, res) => {
res.render('signup', { error: 'enter a username'}); // Could also be "enter your name", or "enter your password".
});
You can use Express Validator
here is the docs
https://express-validator.github.io/docs/
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'm trying to create an Emmet (+TAB) shortcut and I have 90% of it complete. I just can't figure out how to get the last nested elements to be on their own lines. The label, input and closing div tag are all on one line. I'd like to have them all on separate lines
snippet.json code
"form+": "section.form-container>div.form-wrapper>form:post>(div.form-group>label+inp)+btn:s"
html
<!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>Document</title>
</head>
<body>
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group"><label for=""></label><input type="text" name="" id=""></div>
<button type="submit"></button>
</form>
</div>
</section>
Trying to get it to look like this automatically
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="">
</div>
<button type="submit"></button>
</form>
</div>
</section>
</body>
</html>
In this case, the element layout is controlled by inline_break option of output profile, which acts globally for all snippets expanded by Emmet. You can reduce inline_break to 2, it will cause elements to lay out as expected
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.
The following page does send nothing in post request after pressing submit button:
<!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">
<title>My title</title>
</head>
<body>
<form id="myform" method="POST" action="save.php" >
<label for="title">Title: </label>
<input id="title" type="text" size="80" value="Damned"/>
<input type="submit">
</form>
</body>
</html>
Why?
They disobey nothing. You must change
<input id="title">
to
<input id="title" name="somethingThatWillAppearIn$_POST">