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>
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.
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Contact</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<link href="CSS/contact.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<div class="wrapper">
<form class="contact-form" action="mailto:zachareaislam#gmail.com" method="post">
<br><br>
<input type="text" name="first_Name" placeholder="First name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="text" name="last_Name" placeholder="Last Name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="email" name="email " placeholder="Your email address" required><br>
<input type="text" name="subject" placeholder="Subject"><br>
<textarea name="message" placeholder="Your message" required></textarea><br>
<input type="submit" name="submit">
</form>
</div>
</main>
</body>
</html>
/*Not sure as to why it doesn't work.
/*Only just noticed it didn't work while performing some maintenance
You cannot only use HTML, since sending data with a form requires a server backend (like with node or php) to post data.
You cannot send a form directly to email from the HTML. Form should be submitted to some processing file, like .php. You might have had some kind of framework that used to process these types of forms, but generally it should be following:
Action should be a path to the script file like mail.php
Mail.php receives info from the HTML in a $_REQUEST[] set of variables, each variable has a "name" and value.
It processes the request, then can send back to the page.
I want to align my label element to the top left of my input element, so its right on the edge of the left side of the top of the input. How can I acheive this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="functions.js"></script>
<script src="main.js"></script>
</body>
</html>
Thank you!
This is what you need. display: block
Just use CSS property display: block to show labels on top of your element and on left side as you wanted.
Just run snippet to see it in action.
label {
display:block;
}
button {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<btn id="close"> Close </btn>
</div>
<h3>Movie Reviews</h3>
<div id="error-div"></div>
<form class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime:</label>
<input type="text" name="runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating:</label>
<input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<input type="text" name="review" id="review" placeholder="Write a review for this movie" />
<button type="submit" id="create-btn">Create movie</button>
</form>
</body>
</html>
Hope this help.
I don't know how to make this so it generates two different numbers and puts it into two different text boxes I have tried a lot but I just cant get it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dice Game</title>
<style type="text/css">
body,input{font-family:sans-serif; color:#FF0000; background-color:#990000#000000; }
</style>
<script type="text/javascript"language="javascript">
function roller(){
var num=Math.ceil(Math.random()*6);
document.myForm.output.value=num;
}
</script>
</head>
<body>
<form id="myForm" name="myForm"method="post"action="">
<input type="button" name="Roll" id="Roll" value="Button" onclick="roller()"/>
<br/>
<input type="text" name="output" size="16" disabled="disabled" id="output"/>
<form id="myForm" name="myForm"method="post"action="">
<br/>
<input type="text" name="output" size="16" disabled="disabled" id="output"/>
</form>
</body>
</html>
Your HTML is much longer than it needs to be. I cleaned it up and put it in a Fiddle: http://jsfiddle.net/HxzcC/
HTML:
<button id="roll" onclick="roller()">Roll</button>
<br/>
<input type="text" id="input1" size="16" disabled="disabled" />
<input type="text" id="input2" size="16" disabled="disabled" />
JavaScript:
function roller(){
var num = Math.ceil(Math.random()*6);
document.getElementById('input1').value = num;
var num = Math.ceil(Math.random()*6);
document.getElementById('input2').value = num;
}