<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.
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
I have made this simple search box and want to use an svg image as the submit button, how could I do that without any javascript?
here's the form:
<form method="post" action="#">
<input type="text" name="rechercher" id="rechercher" placeholder="Rechercher"/>
<input type="submit" value="none" onerror="this.onerror=null; this.src='images/loupe.png'"/>
</form>
You can use an image button on the button
<input type=image src=PATH_TO_YOUR_IMAGE alt="Submit Me">
or set submit button background to an image using css
input[type=submit] {
background:url(BACKGROUND_IMAGE_PATH_HERE);
border:0;
display:block;
height:Change_TO_backgroundimageheight;
width: Change_To_backgroundimageWidth;
}
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>
The long and short is input type image will also submit the form
I have form like this:
<form action="login_form.php" method="POST" id="login_form">
Email <input name="email" type="text" size="25" placeholder="type your email"/>
Password <input name="password" type="text" size="25" placeholder="type your password" />
<input type="submit" class="btn" value="" name="submit" />
</form>
and for submit button I use an image that is in my CSS:
.btnew{
background:url('img/login_button_1_1.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
.btnew:hover{
background:url('img/login_button_1_1_light.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
When page loading my form has as a submit button, the "login_button_1_1.jpg". When the user place mouse over the submit button, button changes to "login_button_1_1_light.jpg" successfully acording to my CSS. My problem is that the first time that the user places mouse over submit button, there is a very small delay until the image "login_button_1_1_light.jpg" appears. looks like it is not loaded with the page at the begining. Any idea how to fix this?
You can place hover image inside body tag to preload it.
<img src="img/login_button_1_1_light.jpg" style="display:none;" />
I have this registration with HTML:
<form class="registerForm" id="registerForm" action="./index_public.php?page=pilot_insert" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span>Name</span>
</td>
<td><span id="sprytextfield1">
<label>
<input type="text" name="name" id="name" tabindex="1" />
</label>
<span class="textfieldRequiredMsg">*Required</span></span>
</td>
</tr>
<tr>
<td class="style1">E-mail</td>
<td><span id="sprytextfield6">
<label>
<input type="text" name="email" id="email" tabindex="8"/>
</label>
<span class="textfieldRequiredMsg">*Required</span><span class="textfieldInvalidFormatMsg">Formato no válido.</span></span>
</td>
</tr>
</table>
<input class="btn" value=Apply name=apply type="submit" />
</form>
I want put an image next to the registration form. I tryed but I only can put it below the registration form and no next to. HELP!!!
Apply a specific width to your form and float:left and use float:right for the image
Put form and image in div and use "float" css property.
<div style="float:right">
<img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"> </div>
Here is the working demo : http://jsfiddle.net/7uUK8/1/
You can try applying "display:inline-block;" to both the form and the image.
For example:
<form style="display:inline-block;"></form>
<img src="someimage" style="display:inline-block;"/>
Here's a fiddle example with your form and an image side by side: http://jsfiddle.net/VE66w/
Use div or span to make two container in body of the html one is use for form and other is use image. After that apply css according.
Just delete : "Formato no válido."
<div style="float:right"><img src="http://assetprotectionsecured.com/wp-content/uploads/2010/12/alert_png.png"></div>
If you want, image next to registration field ...
I want to basically create this kind of layout:
What would be the best way to achieve this?
Your HTML:
<div id="login">
<div class="float_left">
Your input here <br/>
Your remember me checkbox and text
</div>
<div class="float_left">
Your second input here <br/>
And then your forget password link
</div>
<div class="float_left">
Login button here
</div>
<br style="clear:both;"/>
</div>
Your CSS:
#login {}
.float_left {float:left;}
Here's the semantically clean way to do it:
The HTML:
<form>
<fieldset>
<input id="username" placeholder="user name">
<label><input id="rememberme" type="checkbox"> Remember me</label>
</fieldset>
<fieldset>
<input id="password" type="password" placeholder="password">
Forgot your password?
</fieldset>
<input type="submit" value="Login">
</form>
The CSS:
fieldset {
display: block;
float: left;
margin-right: 8px;
}
#username, #password {
display: block;
width: 100%;
}
Or something like that. I would use labels instead of placeholders, but there weren't any labels in your mockup, so I didn't want to add extra elements.
The "best way" would be to use either flexible box model (display: box, if you have some specific sizes to give to the blocks so they'll align) or table layout (display: table). Unfortunately, Internet Explorer 6 and 7 have absolutely no support for any of them.
So I'd go with either (as this question is GWT-oriented):
a plain old <table> in an HTMLPanel (and use role=presentation for best accessibility)
FlexTable or Grid widget (which are backed by a table)
Look, I've turned Sam's answer above into UI:Binder template. (Errors are possible, I'm writing XML here by hand.)
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.float_left {float:left;}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel class='{style.float_left}'>
<g:TextBox ui:field='loginTextBox'/>
<br/>
<g:CheckBox ui:field='rememberMeCheckBox'>Remember me</g:CheckBox>
</g:HTMLPanel>
<g:FlowPanel class='{style.float_left}'>
<g:PasswordTextBox ui:field='passwordTextBox'/>
<br/>
<g:Hyperlink ui:field='passwordRestorationHyperlink'>Forgot your password?</g:Hyperlink>
</g:FlowPanel>
<g:FlowPanel class='{style.float_left}'>
<g:Button ui:field='loginButton' text='Login'>Login</g:Button>
</g:FlowPanel>
<br style="clear:both;"/>
</g:HTMLPanel>
</ui:UiBinder>
And the corresponding Java class. That should go with no surprise - #UiField and uiBinder.createAndBindUi(this) are your friends there.
I know it may sound bad, but I think tables is the best way to go in this case:
<table style="border: none;" cellspacing="0" cellpadding="0">
<tr>
<td>
<input name="login" />
</td>
<td>
<input name="password" type="password" />
</td>
<td>
<input name="login" type="submit" value="Login" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="keepMeLogged">
<label for="keepMeLogged">Keep me logged in</label>
</td>
<td>
Forgot your password?
</td>
<td>
</td>
</tr>
</table>
CSS
input[type=text] { width: 200px; }
span.keep { display: inline-block; width: 200px; }
HTML
<input type="text" /> <input type="text" /> <button>Login</button> <br />
<span class="keep"><input type="checkbox" />Keep me logged in</span>
Forgot your password?
See it live: http://jsfiddle.net/foghina/92E2a/