I'm sharing this one because it's so obvious when you know it, but makes you bang your head when not!
Submitting the following form, I wasn't getting any of my fields:
<form action="form.php" method="post">
<label for="firstName">First name: </label>
<input type="text" id="firstName" />
<label for="lastName">Last name: </label>
<input type="text" id="lastName" />
<label for="address">Address: </label>
<input type="text" id="address" />
<label for="age">Age: </label>
<input type="text" id="age" />
<button type="submit">Submit!</button>
</form>
Well the answer was quite straightforward: I didn't specify a name attribute for my input fields.
Without the name attribute, it's impossible for the browser to send anything. So here's my working form:
<form action="form.php" method="post">
<label for="firstName">First name: </label>
<input type="text" id="firstName" name="firstName" />
<label for="lastName">Last name: </label>
<input type="text" id="lastName" name="lastName" />
<label for="address">Address: </label>
<input type="text" id="address" name="address" />
<label for="age">Age: </label>
<input type="text" id="age" name="age" />
<button type="submit">Submit!</button>
</form>
Related
The form should not be able to submit the form unless it is filled out. And an error message should pop up.
My problem is that I can't find out how to do this with HTML, because I am not allowed to use JavaScript in this task.
My code:
<form action="https://folk.ntnu.no/anderobs/webtek/receive_form.php" method="post">
<label for="name">Real Name: </label>
<input type="text" id="name" name="name" value=""> <br>
<label for="gender">Your gender: </label>
<input type="radio" id="gender" name="gender" value="Male">
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" value="Female">
<label for="gender">Female</label> <br>
<label for="email">E-Mail: </label>
<input type="email" id="email" name="email" value=""> <br>
<label for="birthdate">Birthdate: </label>
<input type="date" id="birthdate" name="birthdate" value=""> <br>
<label for="hero">Hero name: </label>
<input type="text" id="hero" name="hero" value=""> <br>
<label for="spandex">Do you wear spandex? </label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">True</label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">False</label> <br>
<label for="strengt">Strengt (between 1 and 10): </label>
<input type="number" id="strengt" name="strengt" min="1" max="10"> <br>
<label for="speed">Speed (between 1 and 10): </label>
<input type="number" id="speed" name="speed" min="1" max="10"> <br>
<label for="intelligence">Intelligence (between 1 and 10): </label>
<input type="number" id="intelligence" name="intelligence" min="1" max="10"> <br>
<label for="income">Income: </label>
<input type="number" id="income" name="income" min="0"> <br>
<label for="wealth">Wealth: </label>
<input type="number" id="wealth" name="wealth" min="0"> <br>
<br>
<input type="submit" value="Submit tax form">
I am creating a form for a website, but right now it's only allowing me to tab through from phone down. I cannot tab from first name to last name to phone. how do I change it to allow me to tab through the whole thing?
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
When I copied the HTML into an HTML viewer it works fine. But in the rest of the page it stops working.
Not sure why it's not letting you tab as is, but you could try setting the tabindex property:
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input tabindex="0" type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input tabindex="0" type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input tabindex="0" type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input tabindex="0" type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input tabindex="0" type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea tabindex="0" type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input tabindex="0" type="submit" name="submit" value="Submit" id="submit">
</form>
Make sure your javascript isn't preventing certain keys.
document.getElementById("customerFirstName").onkeydown = function(e){
if(!(e.keyCode === 8 || e.keyCode ===46 || keypress.keyCode === 9)){
if(!(/[A-Za-z]/i.test(String.fromCharCode(e.keyCode)))) {
e.preventDefault();
return false;
}
}
}
I am learning HTML and I am having trouble understanding something. I was checking out this website Create Amazing Web Forms.
I copied the following HTML from their site:
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
Here is my entire web page for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="David Warwick">
<meta name="description" content="User Profile">
<meta name="keywords" content="profile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/page-format.css">
<link rel="stylesheet" type="text/css" href="CSS/header-navigation.css">
<link rel="stylesheet" type="text/css" href="CSS/advertisement.css">
<script src="scripts/Jscripts.js"></script>
<title>User Profile</title>
</head>
<body>
<div id="container">
<div id="header">
<header>
<h1>User Profile</h1>
<nav>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="index.html">Home</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="WarwickDavidAssignment6.html">C# Classes</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="about-me.html">About Me</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="userprofile.html">User Profile</a>
</nav>
</header>
</div>
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
<div id="body">
<main>
<form>
<label for="frmNameA">Name
<input type="text" name="name" id="frmNameA" required
autocomplete="given-name">
</label>
</form>
</main>
<aside>
<img id="Advertisement" src="Images/ad.png" alt="Advertise with us" draggable="true"
ondragstart="drag(event)" />
</aside>
<div id="DropZone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<footer id="footer">
<p>© 2019 David Warwick</p>
</footer>
</body>
</html>
On their website when I use Google Chrome logged in with my Google Account, all of the form fields populate with my name, address, phone number, email, etc. But when I paste this HTML into my HTML file in Visual Studio Code and view my web page from Google Chrome, it doesn't populate with my information. The only field that works is phone and email. And if I enter my phone or email, none of the other fields populate.
Why is this happening and what am I missing?
I think I may have found the answer here: Google Chrome Help - Fill Out Forms Automatically
According to that page, one of the reasons that form data may not be suggested by Chrome is that the site is not secure enough. Well, I am viewing a local html file from my C drive and my "site" is not secure at all. The following is a quote from the Google Chrome Help site mentioned above.
Chrome doesn't suggest my saved info
If you don't get suggestions when you fill out a form, either:
The website might not be secure enough to get this info from Chrome.
If the website is secure, learn how to fix issues with saved info.
Chrome might not detect certain fields in the form.
Hopefully that is what is going on.
Does anybody knows what I have to put in the action to get this contract full to my E-Mail?
<form method="post" name="contact" action="#">
<label for="fullname">Name:</label>
<input name="fullname" type="text" class="required input_field" id="fullname" maxlength="40" />
<div class="cleaner h10"></div>
<label for="email">Email:</label>
<input name="email" type="text" class="validate-email required input_field" id="email" maxlength="40" />
<div class="cleaner h10"></div>
<label for="subject">Betreff:</label>
<input name="subject" type="text" class="validate-subject required input_field" id="subject" maxlength="60"/>
<div class="cleaner h10"></div>
<label for="message">Nachricht:</label>
<textarea id="message" name="message" rows="0" cols="0" class="required"></textarea>
<div class="cleaner h10"></div>
<input type="submit" value="Senden" id="submit" name="submit" class="submit_btn float_l" />
<input type="reset" value="Zurücksetzten" id="reset" name="reset" class="submit_btn float_r" />
</form>
Path to filename that will handle the request or blank if it will be handled right on the page where the form is.
Try looking for web form example + your severside language of choice.
I.e. http://www.html-form-guide.com/php-form/php-form-tutorial.html
Try this:
action="mailto:your#mail.com" method="post" enctype="text/plain"
I have an HTML form element:
<form action="doit" id="doit" method="post">
Name <br/>
<input id="name" name="name" type="text" /> <br/>
Phone number <br/>
<input id="phone" name="phone" type="text" /> <br/>
Year <br/>
<input id="year" name="year" type="text" /> <br/>
</form>
I would like there to be a little more space between the fields, for example, between the lines
<input id="name" name="name" type="text" /> <br/> and
Phone number <br/>,
and also between
<input id="phone" name="phone" type="text" /> <br/> and Year <br/>.
How can I do it?
I would wrap your rows in labels
<form action="doit" id="doit" method="post">
<label>
Name
<input id="name" name="name" type="text" />
</label>
<label>
Phone number
<input id="phone" name="phone" type="text" />
</label>
<label>
Year
<input id="year" name="year" type="text" />
</label>
</form>
And use
label, input {
display: block;
}
label {
margin-bottom: 20px;
}
Don't use brs for spacing!
Demo: http://jsfiddle.net/D8W2Q/
In your CSS file:
input { margin-bottom: 10px; }
A simple between input fields would do the job easily...
<form>
<div class="form-group">
<label for="nameLabel">Name</label>
<input id="name" name="name" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="PhoneLabel">Phone</label>
<input id="phone" name="phone" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="yearLabel">Year</label>
<input id="year" name="year" class="form-control" type="text" />
</div>
</form>