I'm trying to make this comment box bigger but can't seem to figure out how. Just wondering if you guys could help. This is what I've tried to do.
<form action="" target="_blank">
<br>
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
Comment:<br>
<input type="text" rows="4" cols="50" name="comment" value="">
<br><br>
<input type="submit" value="Submit">
</form>
You'll want to use the textarea attribute for that kind of larger, multi-line text field.
<form action="" target="_blank">
<br>
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
Comment:<br>
<textarea rows="4" cols="50" name="comment"></textarea>
<br><br>
<input type="submit" value="Submit">
</form>
Related
I am trying to place the form label on the top-left side, but it does not work. I used Bootrstrap for designing and then I tried to change the CSS code by using ID. It doesn't help. Any advice?
Thank you in advance
#labels {
text-align: left;
}
<form class="" action="index.html" method="post">
<label id="labels" for="">Name</label><br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="text" name="" value="" placeholder="Enter Name"> <br>
<label id="labels" for="">Email Address</label><br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="email" name="" value="" placeholder="Enter Email"> <br>
<label id="labels" for="">Enter Phone</label> <br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="number" name="" value="" placeholder="Enter Phone Number">
</form>
#labels {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<form method="post" action="">
Name: <input type="text" name="name" value="">
<br><br>
E-mail: <input type="text" name="email" value="">
<br><br>
Website: <input type="text" name="website" value="">
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
You might like this code.
You just have to remove <br> which means break. It gives you a line space.
So, you have to remove it.
Edited :
#labels {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<form class="" action="index.html" method="post">
<label id="labels" for="">Name</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="text" name="" value="" placeholder="Enter Name"> <br>
<label id="labels" for="">Email Address</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="email" name="" value="" placeholder="Enter Email"> <br>
<label id="labels" for="">Enter Phone</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="number" name="" value="" placeholder="Enter Phone Number">
</form>
</body>
</html>
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;
}
}
}
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 am trying to create a form for people to contact me but can't get it to look nice. I can't get the forms to align vertically and I also can't get the Message label to display on the top left side of the textarea instead of the bottom left.
<form id="contact" name="contact" method="post">
<label for="name"><br>
Name:</label>
<input type="text" name="name" id="name">
<label for="email"><br>
Email:</label>
<input type="email" name="email" id="email">
<label for="subject"><br>
Subject:</label>
<input type="text" name="subject" id="subject">
<label for="message"><br>
Message:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
I wouldn't use <br> but if you want to, move it outside of the label and before the input.
Alternatively, set your labels to be displayed as block level items:
label {display: block}
Example: http://jsbin.com/ixurUMU/1/
The reason it's not working how you want it to is that labels aren't block-level elements. They are inline. Meaning they will not in any way trigger a 'line break' by default.
HTML
<form id="contact" name="contact" method="post">
<label for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name">
<label for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email">
<label for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject">
<label for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: block}
Working fiddle
You can also use this
HTML
<form id="contact" name="contact" method="post">
<label class="label" for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name"><br>
<label class="label" for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email"><br>
<label class="label" for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject"><br>
<label class="label" for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea><br>
<label class="label" for="message">
</label>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: inline-block;}
.label
{
display: inline-block;
width: 60px;
}
Fiddle Demo
I have a a page with two forms on it. I can only click inside the input boxes of one form. For the other form, I can select the input boxes but only if I use tab. Is there anyway I can fix this? The site is http://login.peakperformancecct.com/. Just for reference, here is my code:
<div class="login">
<h1>Email Login</h1>
<form name="emaillogin" id="loginform" action="http://www.nspirelab.com:2095/login" method="POST">
<p>
<label for="user">Email Address<br />
<input class="input" id="user" name="user" type="text" value="" size="20" /></label>
</p>
<p>
<label for="pass">Password<br />
<input id="pass" name="pass" class="input" type="password" size="20" /></label>
</p>
<p class="submit">
<input type="submit" class="button-primary" value="Log In" />
</p>
</form>
</div>
<div class="login">
<h1>Site Login</h1>
<form name="sitelogin" id="loginform" action="http://peakperformancecct.com/wp-login.php" method="post">
<p>
<label for="user">Username<br />
<input class="input" type="text" name="log" id="log" value="" size="20" /></label>
</p>
<p>
<label for="pass">Password<br />
<input class="input" type="password" name="pwd" id="pwd" size="20" /></label>
</p>
<p class="submit">
<input type="submit" name="submit" value="Log In" class="button-primary" />
</p>
</form>
</div>
Validate, validate, validate.
Your labels in the second form are for the inputs in the first form.
Clicking on the label sends the focus to the input with which it is associated
(Since the inputs are inside the labels, so you can't click on the input without clicking on the label too).