I've created a page with 3 buttons on it but all the buttons are stuck side by side and I don't know how to add space in between them.
This is the page so far.
<div style="width: 500px; margin-left: 20px;">
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHcFlkT3NQQThpa1E/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B-lYnsBAPHT2c2MHhJN0l5NlE/view? usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
<a href="https://drive.google.com/file/d/0B9B- lYnsBAPHZ0xoTUlnZGZMaWc/view?usp=sharing" target="_blank">
<input type="submit" name="" value="View Study" />
</a>
</div>
you can add a style for all the buttons with some margins around them like below
input[type='button']
{
margin:10px 10px 10px 10px; //just an example, you can add according to your need
}
Try adding a class to your div and styling it into your ss instead of hardcoding it into your html. You'll be able to modify all your links via this class later on. If however you must style in your html, simply add this to all your <a> tags: style="margin-right: 10px;"
Example :
<input type="submit" name="" value="View Study"/>
You can also just and break the line then in your top you can just center it or left or right and make it different areas.
Related
I am working on a website for work and have two options for radio buttons. I've used <a> tags as wrappers for the text and radio button to send the user to a specific webpage of that website. The radio buttons and text work each perfectly well on Firefox. On Chrome however, the text works fine as a link. The radio buttons on the other hand do not work. The page just refreshes and nothing happens. I even decided to add a submit so it directs it to one of those pages, with no success as of now. I tried to replicate the code as close as I could to the code from the website down below.
https://jsfiddle.net/hLph4at4/1/
<form name="frmSite" style="float: left; margin-top: 5px;">
<a class="loginPg_choices" href="www.youtube.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to youtube.</span>
<br/>
</a>
<a class="loginPg_choices" href="www.google.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to google.</span>
<br/>
</a>
<a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
Submit
</a>
</form>
You could add an onclick attribute to your tag, e.g. onclick="window.location.href = 'https://youtube.com'"
Or, as an updated Fiddle: https://jsfiddle.net/hLph4at4/7/
That will always be called (unless the propagation is stopped), which also includes the radio button.
I want to change the style of my bootstrap form to my own custom css. So, I create a class in my form, but the changes I make to the class's css isn't changing the style of the form.
Here's my form:
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span> Login</a>
<div class="dropdown-menu" style="padding: 5px; padding-bottom: 5px;">
<form class="login-form" action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" placeholder="Email" style="margin-bottom: 15px;" type="text" name="user_username" size="30" />
<input id="user_password" placeholder="Password" style="margin-bottom: 15px;" type="password" name="user_password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user_remember_me" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
And here's my css:
.login-form {
left:0px;
right:0px;
width:300px;
margin:0 auto;
background-color:#000000;
padding:60px;
}
If .login-form class is coming from an external style sheet you should determine that the style sheet is being loaded by the browsers. In Chrome go to the View menu and from the Developer submenu choose Developer Tools. For most these tools appear at the bottom of the browsers' view port. Click on the Sources tab and then click on your CSS file; if you see the CSS then the style is loading. If not, then the style is not loading and it may be a problem with the URL that points to the style sheet.
Additionally you should validate your style sheet in W3C validator as an error in an earlier or later style could be causing a cascading error. Common Cascading errors are failing to properly close a style rule with a curly brace or terminating a property's value(s) with a semi-colon.
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>
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
I'm trying to use a div to submit a form. Here's the HTML:
<form name="search-form"
id="search-form"
action="php.php"
class="form-search">
<input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;"
type="text"
name="search"
class="input-medium search-query">
<div class="button1" onClick="document.forms["search-form"].submit();">
<a href="#">
<img alt="" src="/img/buttons/icon1.png" />
</a>
</div>
</form>
The form does not submit when the div is clicked. Could someone point out the problem?
thanks. I've been trying this for an hour at least.
The a href is needed to keep the styling, but even if I remove it and left with just the icon, the submit doesn't work; nor does it work if I apply the onclick to the image.
Add search-form between single quotes:
onClick="document.forms['search-form'].submit();"
You can't just use quotes in quotes. Use single quotes to fix:
<form name="search-form" id="search-form" action="php.php" class="form-search">
<input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;" type="text" name="search" class="input-medium search-query">
<div class="button1" onClick="document.forms['search-form'].submit();">
<a href="#">
<img alt="" src="img/buttons/icon1.png" />
</a>
</div>
</form>
It may not have anything to do with the error (or maybe it does, due to invalid html?), but you should add an end-tag to your input tag, right at then end here:
<input style="color: black; (... etc) "
type="text"
name="search"
class="input-medium search-query" />