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.
Related
I'm writing a payment page to make a payment from Paypal using Instant Payment Notification. This process is kicked off by POSTing to Paypal using a submit button and a bunch of hidden form fields. As per layout, I have a table and in one of the tds is the form. The HTML looks like this:
<table>
...
<tr id="paymentRow"> <!-- shows the paypal payment information -->
<td valign="top">
<div style="min-height:50px;">
<br/>
<descriptive> Payment</descriptive>
</div>
</td>
<td style="vertical-align:middle; text-align:center;" >
<form style="width:0" action="https://ipnpb.sandbox.paypal.com/cgi-bin/webscr" onsubmit="return validate_payment_form(this)" method="post" />
<input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/checkout-logo-large.png" title="Check out with PayPal" alt="Submit" name="Submit" id="Submit"/>
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="bob#bob.com" />
<input type="hidden" name="item_name" value="Test purchase item|CustomerID|1" />
<input type="hidden" name="no_shipping" value="1" />
<input type="hidden" name="return" value="https://mywebsite/paymentReceived.php" />
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="currency_code" value="GBP" />
<input type="hidden" name="amount" id="amount" value="1.00" />
<input type="hidden" name="logged_in" value="" />
<input type="hidden" name="<custom>" value="15" />
<input type="hidden" name="notify_url" value="https://mywebsite/paypalNotification.php" /><br />
</form>
</td>
</tr>
...
</table>
There is nothing in my CSS file that sets the alignment for td without the use of a class.
The problem I have is that the paypal button is in the top-left of the td, and I'd like it aligned in the centre/middle. My guess is that this is because it is just one input item in a form. How do I achieve this?
The reason is because you set the form style: width:0 so the td width is also 0; therefore, the image is overflowing and aligned at the left (default alignment for ltr layouts). I'm not sure why you set the form width to 0 but if you remove it, your image will be center-aligned.
I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
I am trying to get form buttons to display inline in a row. I am using CSS to style HTML output from someone else's script, so I have to understand the structure in HTML. I can't change it to something I do understand. See the code below.
What are the default styles for these elements when used in this way? I was under the impression that was a block element and was inline. No matter how I try to style this with CSS, I can't change their position (except with a float, which I'd like to avoid in this case). Help! Thank you :)
<html>
<head></head>
<body>
<div class="comment_buttons">
<form class="button discussion__edit" method="get" action="/doku.php#discussion__comment_form">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="edit" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Edit" class="button" title="Edit" />
</div>
</form>
<form class="button discussion__toogle" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="toogle" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Hide" class="button" title="Hide" />
</div>
</form>
<form class="button discussion__delete" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="delete" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Delete" class="button" title="Delete" />
</div>
</form>
</div>
</body>
</html>
The form elements are inline, but the form and the div inside the form are block elements.
So change them to inline:
form, form div { display: inline; }
http://jsfiddle.net/fbCgk/
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>
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>