Display buttons in the same line - html

I have a web application in which i have these two submit button inside a table
<input type="submit" value="Modifier" name="btn" style="display:inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left:10px ; display:inline" />
I'd like that it be displayed in the same line but i have this result:
Why this happens? how can i fix my code to show the buttons in the same line?

I'd stay away from this method of css personally, just my preference this will mean that every submit button is exactly the same but what if you don't want this styling with every submit button. But then again that method is much better than doing css inside a HTML file
input[type=submit]{
}
You're better off giving the submit buttons a class called submit then you can pick and choose which submits you want to do you're styling for
<input type="submit" class="submit">
.submit{
float: left;
etc.
}
The main problem is your table column widths perhaps give them all a class and give them a width and/or height that meets your needs inside an external css file.

you may try this styling;
input[type="submit"] {
float: right
}
you may also try float left.

Though you could increase the width of the table column or use display: inline-block, maybe you want to do something else:
Increaseing table/column width seems natural, as the two buttons look too wide to fit into that.
Once you have it, you may prefer to use something like block display with a float component.
The inline-block performs poorly in Internet Explorer browsers, even in recent versions like IE9, and a lot of your visitors will be using it for a while.
input[type=submit] {
display: block;
float: left;
width: 100px; /* or whatever fixed width you need */
}

You can try like this
Define a css rules for your submit buttons
input[type=submit] {
display: inline-block;
float: left; /* use this if you want them to be aligned other wise not */
width: as per needed
}

here is an example.. uses bootstrap though
http://jsfiddle.net/QYBHm/
<h3>
<input type="button" href="/users/sign_up">Sign up</input>
or
<input type="button" href="/users/sign_in">Sign in</input>
</h3>
Sign up
or
Sign in

Increase your column size if not auto and add float:left to "Exporter"

In your table row in column with the buttons try this code
<td nowrap="nowrap">
<input type="submit" value="Modifier" name="btn" style="display: inline" />
<input type="submit" value="Exporter" name="btn" style="margin-left: 10px;" />
</td>

I would say that the container column isn't wide enough, so even too they are inline they appear like this. Try changing the width of that column to check if that's the problem.

Try this css
input[type=submit] {
display: inline-block;
float: left;
width: /*adjust as per your table */;
}

Related

How to remove the "Reset" text from reset button in HTML form

I'm trying to use a custom image for a reset button on a form but can't get the default "Reset" text to disappear when I create a class and insert the background image. I'm using a table to create the form and here is the code for this part of the form:
<tr>
<td colspan=6>
<input type="reset" class=cancelButton>
</td>
</tr>
It seems pretty straight simeple and straight forward. Here is my CSS custom class code:
.cancelButton {
background-image: url(cancel.jpg);
width: 160px;
height: 35px;
display: block;
margin-left: auto;
margin-right: auto;
}
This is what I get:
Any assistance would be appreciated. This is for an assignment so I can't take shortcuts.
Don't use background images to convey information. CSS is for presentation.
Use a regular image, and a button element instead of an input element (since a button element can contain the image).
<button type="reset"><img src="cancel.jpg" alt="Cancel"></button>
Add value="" to your input tag
<input type="reset" value="" class=cancelButton>

How to place forms horizontal inside a td tag

I like to place buttons that links to different urls (meaning I have to use one form per button so that the action can hold different urls).
The problem is that the buttons appears vertical inside the td. I like to see them horizontal. Any suggestions? float:left and display:inline-block in the td tag doesn't work.
<table><tr>
<td>
<form action = "page1.html">
<button type="submit" name="btn1">btn1<button>
</form>
<form action = "page2.html">
<button type="submit" name="btn2">btn2<button>
</form>
</td>
</tr>
</table>
I have now put style="display:inline-block" in each form tag and style="white-space:nowrap" in the td. It works.
Using float: left for the forms will work if there is enough space inside the table, so you have to make the table width wider than the combined width of the 2 form contents.
CSS:
table {
width: 100%;
}
form {
float: left;
}
Here is a working example:
https://jsfiddle.net/11x6art9/1/

Float left causes my input label to be on top instead v-align middle

I'm sure there are a lot of people with this problem, but I can't find a proper solution. That is basically is the problem. I've got a form with two pairs of label and field.
HTML:
<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />
CSS:
label {
width: 150px;
float: left;
text-align: left;
}
So the problem is: when I don't use the 'float:left;' the input field will be not nice structured. BUT the label is going top-aligned. How can this be fixed?
An example is visible here: http://jsfiddle.net/ptKEh/9/ (comment float:left; to see what I mean)
EDIT::
Another thing... The input fields are in Chrome correct but in IE9 (9.0.8) the second field is a little shorter.
instead of floating the labels just use display: inline-block;
it will preserve the vertical alignment and it works even on IE6 and 7
I would recommend using padding to move the text down to be inline. This will only work with 1 line of text for the label and is cross browser capable.
I have put together an example jsfiddle http://jsfiddle.net/ptKEh/11/

Aligning a button to the center

I have a simple submit button. I am wanting to align it to the center. Here is my code:
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
However, it does not work. What is the best/easiest way to do this?
You should use something like this:
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.
<input type="submit" style="width: 300px; margin: 0 auto;" />
Here is what worked for me:
<input type="submit" style="margin-left: 50%">
If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended.
You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.
For me it worked using flexbox, which is in my opinion the cleanest solution.
Add a css class around the parent div / element with :
.parent {
display: flex;
}
and for the button use:
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
If this is not working, try :
#wrapper {
display:flex;
justify-content: center;
}
margin: 50%;
You can adjust the percentage as needed. It seems to work for me in responsive emails.
Add width:100px, margin:50%.
Now the left side of the button is set to the center.
Finally add half of the width of the button in our case 50px.
The middle of the button is in the center.
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>

Differents way to structure html inputs and labels in a form

I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.