No red color is coming
How to make it consistent ? either both should have color or none.
<form action="">
<input id="email" type="email" required="required" />
<input type="submit" id="btnSubmit" />
</form>
Microsoft Edge gives the input an outline property if validation fails. You can reset it like this:
#email2 {
outline: 0;
}
<form action="">
Email: <input id="email" type="email" required="required" />
Confirm Email: <input id="email2" type="email" required="required" />
<input type="submit" id="btnSubmit" />
</form>
I got it to work. with this header on the top of my html page:
<!DOCTYPE html>
<html lang="en">
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
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/
I am looking at making a simple survey for my clients, I have the base code, I just need to be able to log the users input to a txt file!
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form validation example</title>
<style>
input{display:block; margin-bottom:10px;}
</style>
</head>
<body>
<h1>######</h1>
<h2>#####</h2>
<form action="validation_example.html" method="post">
<label for="first_name">#####</label>
<input id="first_name" type="text" />
<label for="last_name">###</label>
<input id="last_name" type="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
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.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" placeholder="Not required">
<input type="text" name="" placeholder="Required" required>
<input type="submit" name="" value="Submit">
</body>
</html>
So I'm sorry for asking this but I'm learning HTML for Django and this code seems right to me but I don't get any messages/popup when the required field is empty and I click on submit button.
You need to put your inputs inside the form tag.
<form>
<input type="text" name="" placeholder="Not required" />
<input type="text" name="" placeholder="Required" required />
<input type="submit" name="" value="Submit" />
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
my homework
enter image description here
and this what i doenter image description here
what i have to do more
<!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>
<style>
#box1{
box-sizing: content-box; width:300px; height:200px; padding:150px; border: 1px solid;
</style>
</head>
<body>
<div id="box1" margin>
<form action="must.txt">
Frist Name :<input type="text" name="fname"><br>
Last Name : <input type="text" name="lname" ><br>
Password : <input type="password" name="password" ><br>
Email : <input type="email" name="email" ><Br>
Birthday : <input type="date" name="Birthday" > <br>
Gender : <input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female
</form>
</div>
I made some arrangements. You can do the rest by searching. Good luck with.
<!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>
<style>
#box1{
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);}
</style>
</head>
<body>
<div id="box1">
<fieldset style="padding:50px">
<legend>Register Form</legend>
<form action="must.txt">
First Name :<input type="text" name="fname"><br>
Last Name : <input type="text" name="lname" ><br>
Password : <input type="password" name="password" ><br>
Email : <input type="email" name="email" ><Br>
Birthday : <input type="date" name="Birthday" > <br>
Gender : <input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female<br>
<center><button type="submit" style="margin:5px">Submit</button><button onclick="ResetFields()">Reset</button></center>
</form>
</fieldset>
</div>
</body>
Add confirm password and confirm email:
Confirm Password : <input type="password" name="confirm_password" >
Confirm Email : <input type="email" name="confirm_email" >