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" />
Related
I need to click "SEND" once mobile number is entered in the input. I am using bootstrap material design css. Below is the html code I am using Any helps would be appreciated.
<div class="form-group">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
CSS used is as below.
input[type="text"]::-webkit-input-placeholder {
text-align: right;
font-family: Lato;
font-size: 16px;
letter-spacing: 1px;
color: #00bcd4;
}
You could add a submit button:
<input type="submit" value="SEND" />
You could add a button:
<button type="button">SEND</button>
Or you could wrap something in an tag, as in:
<div class="form-group">
<a href="#">
<label for="mobile_no" class="bmd-label-floating form_input_label">Contact no</label>
</a>
<input type="text" class="form-control no-margin " id="mobile_no" style="width: 80%" placeholder="SEND">
</div>
The submit button is the most common solution.
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.
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 am experiencing an issue with Firefox (tested with FF5/win, FF6/win, FF5/mac) having wider margins than any other browser I've tested. (IE9/win, Chrome/win, Opera/win, Safari/win, Safari/mac).
Admittedly, the HTML is unusual, I have 5 forms in a row, but I cannot find any documented problems with the idea, or any warning against it.
Here is the code:
HTML
<div style="background-color: rgba(255, 0, 0, 0.5); float: left; height: 82px; padding-left: 5px; padding-top: 12px; width: 502px;">
<span style="color: #514536; font-weight: bold;">Search By Destination:</span><br />
<div id="regions" style="margin-top: 5px;">
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Caribbean" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_carrib_region.jpg" alt="Caribbean" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Mexico" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mexico_region.jpg" alt="Mexico" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Thailand" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_thailand_region.jpg" alt="Thailand" />
</button>
</form>
<form action="/view-the-collection/" method="post">
<input type="hidden" id="dest" name="dest" value="Southern US" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_southus_region.jpg" alt="Southern US" />
</button>
</form>
<form action="/view-the-collection/" method="post" style="margin-right: 0px;">
<input type="hidden" id="dest" name="dest" value="Mustique" />
<input type="hidden" id="search" name="search" value="1" />
<button class="imgbtn" type="submit">
<img src="/a/i/pe_mustique_region.jpg" alt="Mustique" />
</button>
</form>
</div>
</div><br style="clear: both;" />
CSS
#container #regions form {
float: left;
margin: 0px 14px 13px 0px;
padding: 0px;
}
For most browsers, it renders like this:
Except in Firefox, which looks like:
I've made sure to remove padding and margins from every element in each of these forms, and it has no effect. I can't for the life of me figure out what is causing this, whether it is a browser incompatibility, or whether what I've coded is completely out of line. Can anyone advise?
Thanks in advance.
Heres a fix. Instead of adding margins to the forms, just set their widths to 97px each, and align the buttons/images to the left!!
Most likely a browser compatibility issue. I would suggest you using a CSS-reset like the HTML5 Boilerplate: http://html5boilerplate.com/
The extra space looks just about wide enough to be inter-word spaces. Does it go away if you try and cull away all whitespace between your HTML tags (ie between the <form>s and between the various parts of each form)?
You can use a very good and well referenced css package called Formalize CSS - Teach your forms some manners! to make the look and feel of your html form elements cross browser and cross os compatibility.
<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.