<!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.
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.
I am developing a web app with Swift 4 and Vapor 2.0. I have a method for a POST request which creates a new user:
builder.post("user", "createUser") { (request) -> ResponseRepresentable in
But I don't know how to add action for button in the .leaf file to call the createUser method. It easy to add a JavaScript action in a .html file, like that <script src="js/index.js"></script>. But with Vapor, I didn't see any mention about that in the Vapor 2.0 docs
Update:
With help from #Caleb Kleveter, now it worked. I updated html page(it's just for test, so that it's not a nice page) with hope: it'll help for newcomer whom face with the same problem when use vapor.
Here is my HTML contents:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Responsive Login Form</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
<h3>
<form action="/user/createUser" method="POST" class="login-form">
<label for="username">Username:</label>
<input type="text" placeholder="Username" name="username"/>
<label for="password">Password:</label>
<input type="password" placeholder="Password" name="password"/>
<input type="submit" value="Login" class="login-button"/>
<form>
</h3>
<a class="sign-up">Sign Up!</a>
<br>
<h6 class="no-access">Can't access your account?</h6>
</div>
</div>
<!-- <div class="error-page">
<div class="try-again">Error: Try again?</div>
</div> -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Scripts can be added to a .leaf file the same way as you would in HTML, just add a script tag:
<script src="js/index.js"></script>
From viewing your code, what you want is a form to post the data to the server. You should replace your .login-form div with a form element:
<form action="/create-user" method="POST" class="login-form">
<label for="username">Username:</label>
<input type="text" placeholder="Username" name="username"/>
<label for="password">Password:</label>
<input type="password" placeholder="Password" name="password"/>
<input type="submit" value="Login" class="login-button"/>
<form>
<a class="sign-up">Sign Up!</a>
<h6 class="no-access">Can't access your account?</h6>
Here is the documentation for HTML forms.
Then you should be able to access the form data in you route method with request.body:
func createUser(req: Request) throws -> ResponseRepresentable {
guard let password = req.body["password"]?.string,
let username = req.body["username"]?.string else {
throw Abort.badRequest
}
// The rest of your code goes here
}
I am not sure if this will work, I haven't tested it, but I think you get the idea.
I used "required" to validate my form but its not work at IE browser. Is this a common error? How to I solve it? Below is my code :
this is my html code which work prefect at Google Chrome and Firefox browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Import a CSV File with PHP & MySQL</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" >
Subject : <br/>
<input type="text" name="subject" id="subject" required/> <br/>
Choose your file: <br />
<input name="csv" type="file"id="csv" accept=".csv" required/> <br/>
Content : <br/>
<textarea name="message" cols="50" rows="10" required></textarea><br/>
<input type="submit" name="submit" value="Submit" onclick="storeQueEmail()"/>
</form>
</body>
</html>
No. required attr wont work for less then IE10. So you could use plugins for validata the form
Here the plugin I would recommend for you..
http://ericleads.com/h5validate/
http://posabsolute.github.io/jQuery-Validation-Engine/
http://adodson.com/jquery.form.js/