The below code is for adding a product to the basket.
Instead of just using an image as a buy button in the input, I would like to have an image or a fill in the background and HTML text above it.
<input border="0" src="/images/buy.png" type="image" />
This is the complete code:
<span class="BuyButton_ProductInfo">
<table id="BUYSECTION">
<tbody>
<tr>
<td valign="top" align="left">Count<br />
<input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
</td>
<td> </td>
<td class="BuyButton_ProductInfo">Buy<br />
<input border="0" src="/images/buy.png" type="image" />
</td>
</tr>
</tbody>
</table>
</span>
You can insert text above input elements. I'm use label element for this work. You can edit the label element position with using CSS codes.
<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>
Not sure if I understand your question correctly either,
But if you're talking about a solid background color on the submit button, you can use
<input type="submit" style="background-color: black; color: white;" value="your text" />
Not sure I understand completely what you are trying to accomplish? Can you just set the display property in CSS?
#BUYSECTION input[type="image"] {
display:block;
}
Otherwise, can you elaborate? Maybe provide a JSFiddle link to show the issue?
EDITED
Is it that you want a clickable submit button, with a pattern or "button-like" fill, but to still have text at a different z-index "above" the button?
HTML:
<button type="submit">Buy</button>
CSS:
button{
/* reset the button style properties */
border:0;
display:block;
/* include the image and dimensions */
width:50px;
height: 20px;
background:transparent url("images/buy.png") no-repeat 50% 50%;
/* format the text */
text-align:center;
padding:5px;
font-weight:bold;
color:#333;
}
Try this:
HTML:
<input type="button" value="Texto del boton" class="imgButton" />
CSS:
.imgButton{
background-image:url(/images/buy.png);
width: 100%;
height: 100%;
}
Saludos!
Related
I am trying to make an html form and I have to replicate the following image:
I've done almost everything right but I can't get the positioning just right, specially on the submit button. What is the best to do this? and also how do I reposition the "message" caption next to the text box?
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 60%;
}
</style>
<body>
<form>
<div>
Name: <input type="text" name="name" id="formElements">
<p>
Email: <input type="email" name="email" id="formElements">
<p>
Message: <textarea name="message" id="formElements"> </textarea>
<p>
<input type="submit" id="button" value="send your message">
</div>
</form>
</body>
A few problems here:
1. Broken HTML
You have several places where the HTML is broken. Remember to always close your <p> tags, and close the <input> tags with a soft closing /> just for good practice.
2. Never use IDs in place of class
IDs are only ever meant to be assigned to one element. They are to be unique. If you want to assign some CSS to multiple elements, use a class:
.class
//Not
#id
3. Use Labels for text in forms
Not only can you style them independently, but you can use the for attribute to link them to your inputs.
4. Repaired CSS
I used some different CSS tricks, such as block-style display for the button to allow me to position it in the right spot.
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
.formElements {
width: 300px;
}
label {
display: inline-block;
vertical-align: top;
}
input[type="submit"] {
display: block;
margin-left: 95px;
}
5. Repaired HTML
Here it is. Always always always write proper HTML. It will save you a bunch of headaches.
<form>
<div>
<label>Name:</label>
<input type="text" name="name" class="formElements" />
<p>
<label>Email:</label>
<input type="email" name="email" class="formElements" />
</p>
<p>
<label>Message:</label>
<textarea name="message" class="formElements" rows="4"></textarea>
</p>
<p>
<input type="submit" id="button" value="send your message" />
</p>
</div>
</form>
Here is a JSFiddle that demo's the form for you.
I hope this helps.
Take a look at this.
There are a few things you should consider in your code:
Do Not use an ID more than once in a page, it must be specific to 1 element. Use classes instead to style multiple elements at once.
Use label tag to explain the form elements
Don't forget to close a container tag like p after opening it.
I would almost put it in a two columns table with the text on the left and the text boxes and button on the right.
I should look like this
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 100%;
}
.right {
text-align:right;
}
.wide {
width:300px;
}
</style>
<body>
<form>
<div>
<table>
<tr>
<td class="right">Name:</td>
<td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
</tr> <tr>
<td class="right">Email:</td>
<td class="wide"> <input class="wide" type="email" name="email" id="formElements"></td>
</tr> <tr>
<td class="right">Message:</td>
<td class="wide"> <textarea class="wide" name="message" id="formElements"> </textarea></td>
</tr> <tr>
<td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
</tr>
</div>
</form>
</body>
I have the following HTML code for a check box:
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one">
</td>
Its output is as below:
but I want the checkbox to be displayed exactly below the label, like so:
select
[]
How can I do that?
Just add style text-align:center; and display:block; to the container.
Good tip: (maybe you know it) If the container of the label and checkbox wll be <label>, the input share click event with the container. For examle:
<table>
<tr>
<td class="myClass">
<label>
Click me, to change Checkbox value !<br>
<input type="checkbox" id="one" name="delete" value="one" align="">
</label>
</td>
</tr>
</table>
check it out http://jsfiddle.net/G7JxA/
Add a span tag around the text, then assign a width and text-align:center to both the span and input.
HTML
<table>
<tr>
<td class="myClass">
<span>select<span>
<input type="checkbox" id="one" name="delete" value="one"/>
</td>
</tr>
</table>
CSS
.myClass{
width: 40px;
display:block;
text-align: center;
}
Working Example http://jsfiddle.net/GSRGX/
DEMO
Please check above demo.
.myClass gives text-align:center;
<table>
<tr>
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one" align="">
</td>
</tr>
</table>
If you set position as relative for your checkbox, you can move it around with left:, right:, top:, bottom:.
The html code would look like this:
<td class="myClass">
select
<br/>
<input type="checkbox" id="one" name="delete" value="one" />
</td>
And the css:
#one {
position:relative;
left:12px;
}
I have made a JSFiddle demo.
I would like the make the text field on the same line of the button, but not successful.
Need some helps.
HTML
<form id="newsletter_form">
<input type="text" placeholder="Enter you mail here ..." /><input type="image" src="images/go_button.jpg" />
</form>
CSS
#newsletter_form
{
display:inline;
vertical-align:top;
text-align:center;
}
#newsletter_form input[type="text"]
{
margin: 0;
}
Demo
http://jsfiddle.net/yokosatan/GbtZy/
Define your input[type="text"] vertical-align:top
as like this
#newsletter_form input[type="text"] {
vertical-align: top;
}
Demo
Just float the first input to the left:
Markup
<form id="newsletter_form">
<input type="text" class="lefty" placeholder="Enter you mail here ..." />
<input type="image" class="clear" src="http://s21.postimg.org/n786rdtfn/go_button.jpg" />
</form>
CSS
.lefty {
float: left;
}
.clear {
clear:both;
}
http://jsfiddle.net/GbtZy/3/
Its worth reading up on floats and how to understand them. Its important to clear after using them, otherwise other things will get a little confusing.
Floats CSS
You should select your input element and give vertical-align: middle; to be displayed properly.
#newsletter_form input
{
margin: 0;
vertical-align: middle;
}
demo
try like this..
<form id="newsletter_form">
<table>
<tr>
<td valign="top">
<input type="text" placeholder="Enter you mail here ..." />
</td>
<td valign="top">
<input type="image" src="images/go_button.jpg" />
</td>
</tr>
</table>
</form>
or Edit your css like this
#newsletter_form input[type="text"]
{
vertical-align: top;
}
you need to define input type for vertical-align work
Basically in the form when you click on the image, it should also check the box. This works in in all browsers but IE7 and IE8. Anyone have any ideas?
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<input type="checkbox" name="interest2" id="interest2" value="x">
<input type="checkbox" name="interest3" id="interest3" value="x"></p>
<p align="center"><label for="interest1"><img src="/images/interest1.jpg" width="152" height="152" alt="" /></label>
<label for="interest2"><img src="/images/interest2.jpg" width="152" height="152" alt="" /></label>
<label for="interest3"><img src="/images/interest.jpg" width="152" height="152" alt="" /></label></P><!-- code making checkbox be an image-->
</form>
It seems that IE < 9 doesn't like subnodes (non-input) in a label. A workaround is to set the images as the background of the label and making the label be inline-block so you can set its size. Tested in IE8 http://jsfiddle.net/K9FEk/8/
CSS
label {
border:1px solid red;
display:inline-block;
}
#label-interest1 {
background-image: url(http://www.gravatar.com/avatar/36fa212d5215d9f282033375834ba0c0?s=120&d=identicon&r=PG);
width: 152px;
height:152px;
}
HTML
<form>
<input type="checkbox" name="interest1" id="interest1" value="x">
<p align="center">
<label id="label-interest1" for="interest1"></label>
</p>
</form>
Not sure what the problem is but this CSS made it work for me in IE8 and IE7 mode using IE9.
label {
display:inline-block; /* "block" would also work */
}
img {
position:relative;
z-index:-1;
}
Demo: http://jsfiddle.net/K9FEk/3/
It may be because the image's space on the page was expanding out of the display:inline styled <label>, or that it was "above" the label, hijacking the click event.
<form method="post" action="confirm_login_credentials.php">
<table>
<tr>
<td>User ID:</td>
<td><input type="text" id="uid"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" id="pass"></td>
</tr>
<tr>
<td colspan="2" align="right">
<img src="images/login.jpg">
</td>
</tr>
</table>
</form>
I am using an image in place of a submit button. How can I submit the login details when the user clicks on the login image as a submit button does?
You could use an image submit button:
<input type="image" src="images/login.jpg" alt="Submit Form" />
Late to the conversation...
But, why not use css? That way you can keep the button as a submit type.
html:
<input type="submit" value="go" />
css:
button, input[type="submit"] {
background:url(/images/submit.png) no-repeat;"
}
Works like a charm.
EDIT: If you want to remove the default button styles, you can use the following css:
button, input[type="submit"]{
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
from this SO question
You can also use a second image to give the effect of a button being pressed. Just add the "pressed" button image in the HTML before the input image:
<img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/>
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>
And use CSS to change the opacity of the "unpressed" image on hover:
#pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}
I use it for the blue "GO" button on this page
This might be helpful
<form action="myform.cgi">
<input type="file" name="fileupload" value="fileupload" id="fileupload">
<label for="fileupload"> Select a file to upload</label>
<br>
<input type="image" src="/wp-content/uploads/sendform.png" alt="Submit" width="100"> </form>
Read more: https://html.com/input-type-image/#ixzz5KD3sJxSp
<div class="container-fluid login-container">
<div class="row">
<form (ngSubmit)="login('da')">
<div class="col-md-4">
<div class="login-text">
Login
</div>
<div class="form-signin">
<input type="text" class="form-control" placeholder="Email" required>
<input type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="col-md-4">
<div class="login-go-div">
<input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go"
onmouseover="this.src='../../../assets/images/svg/login-go.svg'"
onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/>
</div>
</div>
</form>
</div>
</div>
This is the working code for it.
Make the submit button the main image you are using. So the form tags would come first then submit button which is your only image so the image is your clickable image form. Then just make sure to put whatever you are passing before the submit button code.