I want this form band button to line up horizontally and to sit as a whole in the horizontal center of the page.
How do I set my css?
<form action="signup.php" method="post">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
Plenty of ways to tackle this. Here is one solution. Though, I do recommend not using inline styles, but here is your form with the CSS.
<form action="signup.php" method="post" style="margin: 0 auto; width: 350px;">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
I would wrap your inputs in a div and set the div to display:inline in your css. In your css also target your form and set that to margin:auto
something like this:
<div style="width: 300px; margin-left: auto; margin-right:auto;">
<form action="signup.php" method="post">
<fieldset>
<label>Email: <label>
<input type="text" name="email" id="email" placeholder='email address' />
<input type="submit" value="Sign Up" class= "button" />
</fieldset>
</form>
</div>
Related
I have a form inside a div. I want to move the div to the right, and I can do that if I use an inline style like this:
<div class="joinform-page" style="margin-left: 30%;>
I want to move it using margin-left: 30% in the css, not as an inline style because inline styles make media queries more difficult. But it ignores any margin changes I make in the css.
Here's the full html:
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
Here's the relevant css class:
.joinform-page {
width: 80%;
padding: 0% 0 0;
margin-top: -2.5%;
margin-left: 30%; }
Why doesn't this div move when I use margin-left in the css,. not as an inline style.
Thanks for any help.
Actually It was working with the same piece of code.
If it still doesn't work, there might be styling for parent element or another styling for same element.
The CSS you have above works as you would expect. Please ensure your CSS is correctly imported like so:
<!-- Where FILE_NAME is the name of your .CSS file -->
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">
.joinform-page {
width: 80%;
padding: 0% 0 0;
/*margin-top: -2.5%;*/
margin-left: 30%;
}
<div class="joinform-page">
<div class="form">
<form action="data_in.php" method="post" name='data_in' id='data_in'>
<input type="text" placeholder="Email" name="email_field" maxlength="60">
<input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
<input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">
<div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
<div><input type="hidden" id="comments" name="comments" value="none"></div>
<button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25); text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>
<div style="padding-left:0%;">
<label class="container">
<span class="betajoinpage_cbx">Add me to your list</span>
<input type="hidden" name="custom_checkbox" value="No">
<input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked" value="Yes"><span class="checkmark" style="color:blue;"></span>
</label></div><br>
</form>
</div>
</div>
I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
I have this textbox
<form action="/index.php" method="post">
<input style="width: 450px;" name="url" type="text" />
<input type="submit" value="Submit" />
</form>
I want to align it at the center. How can I do this?
Put the form inside a div. Style the div to align its child to center as:
<div style="text-align:center" >
<form action="/index.php" method="post">
<input style="width: 450px;" name="url" type="text" /> <input type="submit" value="Submit" /></form>
</div>
Hope it helps.
So I'm trying to make a form with a message box, but it won't align correctly; it keeps pushing the text to the bottom of the area it takes up..
I've accepted putting in a break between the text field and the message field for a long time, but there's a break, so it isn't aligned there either...
JSFiddle: http://jsfiddle.net/2U2PJ/
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<p>
<label><font size="3">Name: </font>
<input name="Name" type="text" id="Name" size="25" /><font size="2"> <font color="red"><span id="req_3" class="req">*</span></font></font></label>
</p>
<p>
<label><font size="3">Email:</font>
<input name="E-mail" type="text" id="E-mail" size="25" /> <font size="2"><font color="red"><span id="req_3" class="req">*</span></font></font></label>
</p>
<p>
<label><font size="3">Review:</font>
<textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
</p>
</label>
<label>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</label>
</form>
As per my comment. Use CSS. This should get you on the correct path:
http://jsfiddle.net/2U2PJ/3/
css:
.contact-form .field label { width: 100px; display:inline-block; vertical-align: top; }
.contact-form .req { color: red; }
.contact-form .field .textbox { width: 180px; }
html:
<div class="contact-form">
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','Email','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<div class="field">
<label for="Name">Name:</label>
<input name="Name" type="text" id="Name" class="textbox" />
<span id="req_3" class="req">*</span>
</div>
<div class="field">
<label for="Email">Email:</label>
<input name="Email" type="text" id="Email" class="textbox" />
<span id="req_3" class="req">*</span>
</div>
<div class="field">
<label for="Message">Review:</label>
<textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
</div>
<div>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</div>
</form>
</div>
Full Code to simplify your issue!
http://jsfiddle.net/SinisterSystems/jLXsV/2/
HTML:
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
<p>
<label>Name:</label>
<input type="text" />
</p>
<p>
<label>Email:</label>
<input type="text" />
</p>
<p>
<label>Review:</label>
<textarea rows="7" cols="35"></textarea>
</p>
<p>
<input name="Submit" type="submit" id="Submit" value="Submit" />
</p>
CSS:
input, textarea {
width:200px;
margin-left:15px;
}
label {
float:left;
min-width:100px;
}
With your IDs
Fiddle: http://jsfiddle.net/SinisterSystems/jLXsV/3/
This is my code so far:
<form>
<p>Username: </p><input type="text" name="username" />
<p>Password: </p><input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>
For some interesting reason it is going to another line for ever paragraph and textbox. What can I do to prevent that?
Put your paragraph tags around the input also. The P tag basically does a line break at the end of itself.
<form>
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<br /><input type="submit" value="Submit" />
</form>
Do this:
<form>
Username: <input type="text" name="username" />
<br/>
Password: <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>
or
<form>
Username:<br/> <input type="text" name="username" />
<br/>
Password:<br/> <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>
<form>
<div style="float: left;">Username: <input type="text" name="username" /></div>
<div style="float: left;">Password: <input type="text" name="password" /></div>
<div style="clear: both;"></div>
<input type="submit" value="Submit" />
</form>
They're dropping to a new line because of your markup. Paragraph (<p>) tags drop to a new line, as do breaks (<br>). I would suggest using <span> tags in place of the paragraph tags, and remove the line break.
p tag is by default "display: block" which means a <br /> before and after p is added by the browser, so is the reason it is going to the next line.
include both the label & textbox in "p"
<form>
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<p><input type="submit" value="Submit" /></p>
</form>