My code for a button wont work. My goal is to get the width longer, but it has no effect. Here is a snippet of code from it, where the errors should be:
<form action="http://kindust.com/test.html">
<input type="submit" value="Shop" width="150">
</form>
CSS
.btn{
width: 150px;
}
HTML
<form action="http://kindust.com/test.html">
<input class="btn" type="submit" value="Shop">
</form>
Related
So i am trying to get my buttons to show up left or right of another button, and instead of on top/bottom of the button. I'm new to all of this and would love to figure this out.
Here is my code, what could i apply to it that would make them stack left/right?
<form action="">
<input type="submit" value="Contact me">
</form>
there is a lot of ways to do this, but you can try float css property as follow:
input[type="submit"]{
float:left;
display:inline-block;
}
input[type="button"]{
float:right;
display:inline-block;
}
<form action="">
<input type="submit" value="Contact me">
<input type="button" value="another button">
</form>
Try researching the float property in CSS here. You can alter the visual flow of your HTML document by doing so, e.g.
#button1 {
float: right;
}
#button2 {
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 50%;">
<input id="button1" type="button" value="button 1">
<input id="button2" type="button" value="button 2">
<input id="button3" type="button" value="button 3">
</div>
</body>
</html>
If I am getting your problem correctly, you meant to say that you wanted to get the buttons in this form side to each other instead of one below the other. According to me, when you will add another button in this form, it will appear at the side of the first button only. But don't give <br/> tag between buttons and even do not put them into the separate <div> tags.
Here is the sample of my code I did for you:
<html>
<head>
<title>Button Left/Right</title>
<link src="style.css" rel="stylesheet" type="text/css"/> //add this line if you want to add css otherwise ignore this line and remove from code
</head>
<body>
<form action="">
<input class="btn" type="submit" value="Contact me"> //observe I have given class to the buttons
<input class="btn" type="submit" value="Contact me Button 2">
</form>
</body>
</html>
In case if it is not working, then create the following style.css file inside the directory where you have the current html file. And in the style.css file add following lines:
.btn{
display:inline-block;
}
I have to display both these buttons in single line.
I tried adding style="{display:block-inline;}"> in form element as suggested somewhere but that too didn't help me. Any idea how to do it ?
<html>
<body>
<div>
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</body>
</html>
Put both forms in their own div and use float in your css.
See fiddle example:
<body>
<div>
<div id=form1>
<form >
<input type="submit" value="Button1" />
</form>
</div>
<divid=form2>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</div>
</body>
#form1{
float:left;
}
#form2{
float:left;
}
https://jsfiddle.net/5mcffrv9/
Inline-block works perfect. Take a look here. Demo
HTML
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
CSS
form { display: inline-block; }
HTML
Add
<div class="name">
</div>
to your forms each one.
Then in css add
.name{
float: left;
}
or
.name{
display:inline-block;
}
Check this fiddle
https://jsfiddle.net/kb86veLk/1/
Displaying with inline block
like so
https://jsfiddle.net/kb86veLk/2/
is probably the best way though.
You just need to do this:
CSS
form{display:inline;}
DEMO
i have html form and css, to side my button side by side. but im not able to give space between the buttons.
here is my code:
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>
<p style="clear:floats"></p>
</div>
</body>
</html>
In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>
</div>
</body>
</html>
The easiest way is to add margin to one of the inputs.
Style="margin-right:30px;"
You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/
A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.
Give the custom-button class a width and change the second button to float:right
http://jsfiddle.net/v85sH/
The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.
CSS
.custombuttons {
width:100%;
}
.firstbutton {
float:left;
color:#fff;
}
.secondbutton {
float:right;
}
HTML
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" class="firstbutton" value="paste2" />
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" class="secondbutton" value="colSplit" />
</form>
<p style="clear:floats"></p>
</div>
When i am using HTML To create a form the buttons are on different sizes (as size of inputted values).
It is possible to set a proper width for HTML Buttons With Out using CSS.
<form>
<input type="button" value="input"><br>
<input type="button" value="ok">
</form>
Option1
See example http://jsfiddle.net/mScnX/
HTML:
<form>
<input type="button" value="input" id='button1'><br>
<input type="button" value="ok" id ='button2'>
</form>
CSS:
#button1 {
width:400px;
}
#button2{
width:100px;
}
Option 2:
See example: http://jsfiddle.net/mScnX/2/
HTML:
<form>
<input type="button" value="input" style="width:400px"><br>
<input type="button" value="ok" style="width:100px"'>
</form>
You have a couple options.
1) You can use inline styles (not best practice)
<button style="width: 50px; height: 20px;">Click Me</button>
OR
2) You can use this in a style tag in the head of your page or in an external style sheet.
button {
width: 50px;
height: 20px;
}
There is no other way to style the html elements. But there is a way to style each button with tag in your html. Just add
<style>
input[type="button"] {
width: 13px;
}
</style>
It's a alternative but is not a good practice at all.
I have a text input element and a submit input element that I need to be inline and responsive. The problem is that I can't find a way to get the text input element to be fluid without screwing up the positioning of the button. Any help would be appreciated.
Here is the html structure I'm using.
<div class="search-call-to-action">
<form action="#">
<input type="text" name="search" placeholder="Search charities by keyword or name...">
<input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
</form>
</div>
Here is a screenshot of what I am trying to achieve. The text input needs to be fluid.
http://i.imgur.com/Ivty5Qq.png
I have provided a jsfiddle with a working demo on how to achieve this. It uses the overflow property. Demo http://jsfiddle.net/kevinPHPkevin/vbdy9/
<form action="search.php" method="get">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
</form>
You can use media queries to achieve this. Then you should create queries for each resolution. Example:
#media (min-width: 320px){
div
{
//some propererties in ems
}