I'm trying to swap out all my default submit buttons to image submit buttons. However, when I do this it still functions fine but there seems to be not text over the image like the value="Login" on the default button so my I was trying alt="Login" but it simply wasn't appearing. Anyone know why this is?
<form method="post" action="index.php">
<div id="userNameLoginDiv">
<p>Username:</p>
<input type="text" name="username" size="12">
</div>
<div id="userPasswordLoginDiv">
<p>Password:</p>
<input type="password" name="password" size="12">
</div>
<div id="loginBtnDiv">
<input type="image" src="IMAGES/button.png" alt="Login">
</div>
</form>
Because image inputs are server side image maps. They are designed to let the user pick a point on the image and send its coordinates to the server. The image itself is the information to be shown to the user, not some text.
The alt text is only shown if the image cannot be (e.g. if the URL to it is a 404 error or if the visitor makes use of screen reader software).
If you want a background image on a submit button, then use a submit button and set the background-image CSS property. (You may also want to set border, padding, et al).
Related
I am trying to mess with a message people get on their phones on this website and I want to send a image
I want to put a image in the value part of the code (Sorry if I'm using incorrect terms I am fairly new to html)
<input id="text" class="text" value="I want the image here" placeholder="Type your message here" autofocus="">
You can only link to the image in the text input so the value will be the location of the image.
<input type="text" value="www.website.com/image.gif">
If you want them to type into the text field the value will change to whatever they type into the field.
You also get an actual image input type
<input type="image" src="img.gif" alt="image">
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
<form name="loginform" action="URL_TO_LOGIN_PAGE_GOES_HERE" method="post">
<input type="hidden" name="log" value="USERNAME" />
<input type="hidden" name="pwd" value="PASSWORD" />
<input type="submit" value="" class="mtrgimg" style="background:url(http://aff.securesb.info/accounts/default1/banners/b40a4792.png) center no-repeat; width:145px; height:145px; border:none; cursor:pointer;" />
</form>
http://jsfiddle.net/kr3n4/1/
I would like for the image in this button to be proportionally resized to 145x145. I do not have access to the stylesheet so I cannot use any CSS. Also, cannot use JavaScript. There must be a way to resize using just HTML.
Also, when it is all said and done, I would also like this button to open its link in a new new tab or window.
I would like for the image in this button to be proportionally resized
to 145x145. I do not have access to the stylesheet so I cannot use any
CSS. Also, cannot use JavaScript. There must be a way to resize using
just HTML.
Well, your style tag in the <input> is (inline) CSS. You can use that and follow the methods discussed in this thread, for example.
Also, when it is all said and done, I would also like this button to open its link in a new new tab or window.
You can put target="_blank" on the <form> tag to open the page set as the action in a new window.
Let say we have the following form code
<form action="post" method="post" name="form">
Your Name : <input name="name" type="text" id="name">
<input type="submit" name="Submit" value="Submit">
</form>
what if i want it to be viewed as image
Why ! in fact i've text-area where i will put some HTML codes and i want the output of that code appears normally as web-browser view but as image , means no way to click on it or operate just appears as image
I do not know if it possible or not but i wonder it it can be and here is example for exactly how this forms i wants to appears
output of the html codes appears as image
so any method any help any function or class can do like this ?!
Thanks
You can do it two ways
Put and transparent block element over it (position: absolute and so on)
disable every input element (disabled:disabled attribute)
see:
http://www.w3schools.com/tags/att_input_disabled.asp
I have this code in my jsp
<div class="controls">
<input type="image" class="sprite submit-button button" name="SubmitChangeCreds" value="ChangeUIDSubmit" src="../images/layout/transparent.png" />
</div>
In my servlet I am trying to get the value of this image like this
request.getParameter("SubmitChangeCreds")
But this is null.
Help will be much appreciated.
As per the HTML specification, the input type="image" is to be used as an image map. The webbrowser will send the x and y position of the mouse pointer to the server when the enduser clicks on the image map. The submitted value is available as originalname.x and originalname.y.
So in your case:
String x = request.getParameter("SubmitChangeCreds.x");
String y = request.getParameter("SubmitChangeCreds.y");
However, you seem after all to be abusing the input type="image" since you don't seem to be interested in the mouse position. I'd suggest to just use input type="submit" wherein the image is specified as a CSS background image.
E.g.
<input type="submit" class="sprite submit-button button" name="SubmitChangeCreds" value="ChangeUIDSubmit" />
with e.g.
.submit-button {
background-image: url('../images/layout/transparent.png');
}
That's a more correct usage of background images in buttons.