How do I change the position of this form, with an absolute position?
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
you can add a css selector by selecting the form id of contact_form and adding a rule for positon
<style>
#contact_form {
position: absolute;
}
</style>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Jouw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Jouw email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Jouw bericht:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</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>
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 a simple HTML5 form. but when I do a code validator (http://validator.w3.org/check) I get multiple errors
The for attribute of the label element must refer to a form control. What does this error mean? It is pointing to this line
<label id="name0" for="Name" style="width: 180px;">Name</label>
This is my current form
<div id="contact-add" title="Add New Contact" style="display: none;">
<div id="response-add"></div>
<form method="post" id="add-form">
<div class="label-input">
<label id="name0" for="Name" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />
<input type="hidden" name="add_account_id" id="add_account_id" value="<?php echo $add_account_id; ?>" />
</div>
<div class="label-input">
<label id="title0" for="title" style="width: 180px;">Title (Optional)</label>
<input type="text" value="" name="title" placeholder="Enter title here..." />
</div>
<div class="label-input">
<label id="email0" for="email" style="width: 180px;">Email (Optional)</label>
<input type="text" value="" id="email" name="email" placeholder="Enter email address..." />
</div>
<div class="label-input">
<label id="phone0" for="phone" style="width: 180px;">Direct Number (Optional)</label>
<input type="text" value="" id="phone_number" name="phone_number" placeholder="Enter direct number..." />
</div>
<div class="label-input">
<label id="extention0" for="extention" style="width: 180px;">Extention (Optional)</label>
<input type="text" value="" id="phone_ext" name="phone_ext" placeholder="Enter extention number..." />
</div>
<div class="label-input">
<label id="shift0" for="shift" style="width: 180px;">Work Shift</label>
<?php echo generateWorkShiftMenu($db, 'work_shift', 'Day'); ?>
</div>
</form>
</div>
The for attribute of a label must be the id of a form control. i.e.
<label id="name0" for="fullname0" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />
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>
"The for attribute of the label element must refer to a form control."
Honestly, I don't understand what's wrong with the markup. I've looked through so much of the W3's site and just can't get it.
Help?
HTML:
<form action="process.php" method="post">
<div>
<label for="name">Name</label><br />
<input type="text" value="" name="name" />
</div>
<div>
<label for="email">E-mail</label><br />
<input type="text" value="" name="email" />
</div>
<div>
<label for="message">Message</label><br />
<textarea name="message" cols="30" rows="4"></textarea>
</div>
<div>
<input type="checkbox" value="yes" name="newsletter" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div>
<input type="submit" value="Submit" name="subscribe" />
</div>
</form>
You're missing the id attribute.
So to fix it, for example:
<input type="text" value="" name="email" id="email" />
That's it. Linky.
Thirtydot is correct; there is amissing id in your form. I have added all.
Check this:
<form action="process.php" method="post">
<div>
<label for="name">Name</label><br />
<input type="text" id="name" value="" name="name" />
</div>
<div>
<label for="email">E-mail</label><br />
<input type="text" id="email" value="" name="email" />
</div>
<div>
<label for="message">Message</label><br />
<textarea name="message" id="message" cols="30" rows="4"></textarea>
</div>
<div>
<input type="checkbox" id="newsletter" value="yes" name="newsletter" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div>
<input type="submit" value="Submit" name="subscribe" />
</div>
</form>