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/
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 have an HTML Form with some fields. I want to add two buttons to it. First two recreate a new set of all the fields in this form on the next line. Second to delete any of the newly recreated set of fields.
<form action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
</form>
Yes, you can use only html, or you can use JS or if you want you can use HTML and JS to make it more dynamic,:-
You can refer this
you can use var cln=form.cloneNode(true); to clone a particular element or a whole form and then just append it to the body of the document using document.body.appendChild(cln);
run the code snippet to see how it works
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function copyForm(){
var form=document.getElementById("form1");
var cln = form.cloneNode(true);
document.body.appendChild(cln);
}
function deleteForm(event){
event.parentElement.remove();
}
</script>
</head>
<body>
<input type="button" name="copy" value="add new form" onclick="copyForm();">
<form id="form1" action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
<input type="button" value="delete form" onclick="deleteForm(this);" />
</form>
</body>
</html>
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.
I've got a table with few forms. The date is submit button:
And this is the same table without form tag(only input type="submit"):
As you can see, form tag adds new line. How can I avoid this?
The code:
<form id="command" action="/wifi/selection" method="POST">
<input type="hidden" name="beginDate" value="2014-06-30">
<input type="hidden" name="endDate" value="">
<input type="hidden" name="apId" value="1824">
<input type="hidden" name="ssidId"
value="42">
<input type="submit" class="btn btn-link"
value=" 2014-06-30" />
<input type="hidden" name="_csrf" value="812810c6-9e41-434c-baec-b4db1680ce7a" />
</form>
Set style="display: inline;" on the form might do it.
try this:
<style type="text/css'>
form {display:inline; margin:0px; padding:0px;}
</style>
This link will help: How to prevent newline/line break within a <form></form>?
I have a link class.php?event=donbass2012
and I have a html form. How to send value from form to url to get link like this:
class.php?event=donbass2012&class=f1a
Just use a normal GET form, with whatever inputs you need.
<form action="class.php">
<input type="hidden" name="event" value="donbass2012">
<input type="hidden" name="class" value="f1a">
<input type="submit">
</form>
Is this what you want?
<form name="input" action="class.php" method="get">
<input type="hidden" name="event" value="donbass2012" />
<input type="hidden" name="class" value="f1a" />
<input type="submit" value="Submit" />
</form>