My question: Does the checkbox offer a pattern? If so, what is it?
The following is intended for additional context, as the community is willing to offer peripheral answers as well.
HTML input elements can accept a pattern, which comes in handy for 'real-time' error reporting. Say an input field has a pattern [a-z], any input with numbers will be marked with the invalid pseudo class.
I am unable to have a checkbox respond in the same manner.
I understand that sources (https://www.w3schools.com/tags/att_input_pattern.asp, as well as people in the comments) claim the pattern match is run after form submission, this does not seem to be the actual behavior. Here is an example of how the input's invalid is applied before the form is submitted: https://jsfiddle.net/kshe57ou/
I'm attempting to alter styles of my form based upon this pseudo class, and was hoping there was a way to style the checkbox as well, whether or not checkbox inputs had a pattern attribute.
You can still style a checkbox with the :invalid when it is required.
input[type="checkbox"]:required:invalid {
outline: 1px solid red;
}
input[type="checkbox"]:required:valid {
outline: 1px solid green;
}
<form>
<input type="checkbox" required />
<input type="submit">
</form>
Typically most people would style the label
input[type="checkbox"]:required:invalid + label {
color: red;
}
input[type="checkbox"]:required:valid + label {
color: green;
}
<form>
<input type="checkbox" required id="terms"/>
<label for="terms">I accept the terms</label>
<input type="submit">
</form>
Looks like the pattern attribute is unavailable for radio buttons and check boxes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
It's not enough to read the spec, we must thoroughly read it.
In Internet Explorer-10;
When i "text-align" right to any input type textbox.
The visibility of last digit gets bad.
This is bug in IE-10 rendering following solution is given
::-ms-clear {
display: none;
}
As i am not familiar much with CSS; i do not know how to implement "two colon class" on particular input type.
Could any one help me out?
1) How to mention ::-ms-clear in INLINE STYLES?
2) How to make class of above one and implement on particular code?
Following is HTML Code:
<input type="text" value="" data-require-number="true" id="belop">
You can use like this for input type text as a class, and you can't use this in inline style.
input[type=text]::-ms-clear{
display: none;
}
Update :-
css -
.className::-ms-clear{
display: none;
}
html -
<input type="text" value="" data-require-number="true" id="belop" class="className">
<datalist> is an HTML5 tag which is use in order to order elements and choose them. when i use it with <input>, it gives me this.
i dont want to see list items like that before i typed it on, so can i eliminate this down button on it. is there an attribute for this?
ALSO can i use it other tags than <input>
NO is not an answer for this question!
To remove the down arrow, try using the following in your CSS:
input::-webkit-calendar-picker-indicator {
display: none;
}
Example http://jsfiddle.net/5UYdy/
Unfortunately, there is no selector which does it.
BUT!
You can add required attribute to the <input> tag. Then, we can access this input by CSS3 tags:
input:valid - when input has content
input:invalid - when input is blank
Adding following style:
input:invalid::-webkit-calendar-picker-indicator {
display: none;
}
will show the list only when the input is not empty.
The following JSFiddle shows that in action, hope it helps:
http://jsfiddle.net/5UYdy/2/
The only disadvantage is that the input is required.
And no, you can't use it with other elements, according to W3Schools
The tag specifies a list of pre-defined options for an element.
This will remove history of an input box but...,
<input type="text" autocomplete="off"/>
but I think there is no way to remove <datalist>
your best bet is this:
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
<div class="form-field__control">
<input
type="text"
list="currency"
id="currency"
/>
<datalist id="currency">
<option>Dollars</option>
<option>Pounds</option>
<option>Naira</option>
<option>Peso</option>
</datalist>
</div>
I am using this code to try and submit a value via form but it doesn't seem to submit anything...
I would normally use a checkbox or Radio buttons for multiple options but I want to use an image to do this.
Is this code wrong?
<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />
So I want to pass the value in value="myValue".
The form works fine so that's not the problem, I just need help with the input part not submitting as I know that works.
Thanks
An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.
Using the type="image" is problematic because the ability to pass a value is disabled. Although it's not as customizable and thus as pretty, you can still use your images ao long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
I was in the same place as you, finally I found a neat answer :
<form action="xx/xx" method="POST">
<input type="hidden" name="what you want" value="what you want">
<input type="image" src="xx.xx">
</form>
I've found that image-buttons DO return a response, but you should NOT use a value-option. What I see returned are two version of the name="MYNAME" with .X and .Y endings.
For example:
<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">
This is within your <form> to </form>. If you click the image, what's returned are STOP.X and STOP.Y with numeric values. The existence of either indicates the STOP image-button was clicked. You don't need any special code. Just treat it as another kind of "submit" button that returns a pair of augmented NAMEs.
I've tried this on Safari, Firefox and Chrome. The image wasn't displayed with Safari, but where it was supposed to be located, my cursor turned into a finger-icon, and I could click it.
Some browsers (IIRC it is just some versions of Internet Explorer) only send the co-ordinates of the image map (in name.x and name.y) and ignore the value. This is a bug.
The workarounds are to either:
Have only one submit button and use a hidden input to sent the value
Use regular submit buttons instead of image maps
Use unique names instead of values and check for the presence of name.x / name.y
Here is what I was trying to do and how I did it. I think you wanted to do something similar.
I had a table with several rows and on each row I had an input with type image. I wanted to pass an id when the user clicked that image button. As you noticed the value in the tag is ignored. Instead I added a hidden input at the top of my table and using javascript I put the correct id there before I post the form.
<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">
This way the correct id will be submitted with your form.
Inputs of type="image" don't send their name/value pair when used to submit the form. To me, that sounds like a bug, but that's how it is.
To get around this, you can replace the input with a button of type="submit", and put a img element inside.
Unfortunately, that causes your image to be in a ugly HTML "button". However, assuming you aren't using the standard HTML button anywhere, you can just override the stylesheet, and then everything should work as expected:
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>
You could use a radio button/checkbox and set it to hide the button in css and then give it a label with an image.
input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}
Then on the page:
<input type="radio" name="emotion" id="mysubmitradio" />
<label for="mysubmitradio"><img src="images/f.jpg" />
<span>if you need it</span></label>
And then set it to submit using javascript:
document.forms["myform"].submit();
Solution:
<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">
<input type="hidden" name="accion" id="accion"/>
<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>
function validaFrmSeguimiento(accion)
{
document.frmSeguimiento.accion.value=accion;
}
Regards,
jp
well if i was in your place i would do this.I would have an hidden field and based on the input image field i would change the hidden field value(jQuery), and then finally submit the hidden field whose value reflects the image field.
You could use formaction attribute (for type=submit/image, overriding form's action) and pass the non-sensitive value through URL (GET-request).
The posted question is not a problem on older browsers (for example on Chrome 49+).
Add this
name="myvalue"
To your tag.
To submit a form you could use:
<input type="submit">
or
<input type="button"> + Javascript
I never heard of such a crazy guy to try to send a form using a image or a checkbox as you want :))
I want a <p> tag (or a label might be correct actually) to appear behind an input field so that I can show the active caret on the input field and then hide the absolutely positioned <p> tag when the user starts to typing.
you can see what the problem is here: http://jsfiddle.net/captainill/BG7Kx/
In the jsfiddle I've given the input a value to illustrate the problem although in the solution there'd be no default text in the input.
relevant html:
<form name="tagset-form" id="tagset-form" action="" method="get">
<p class="form-p-text">Add Set Name</p>
<input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the <p> tag">
<input id="tagsubmit" type="submit" value="" style="display:none;">
</form>
css:
input#tagset-name{
width:100%;
height:14px;
padding:8px;
line-height:15px;
color:black;
z-index: 2;
}
input:focus#tagset-name{
color:white;
}
.form-p-text{
z-index: 1;
position:absolute;
top:8px;
left:180px;
color:blue;
font-weight:bold
}
EDIT:
this jquery plugin does exactly what I want:
http://o2v.net/blog/jquery-formlabels-plugin
It does so by creating a label, which when clicked, calls focus() on the input. It looks sharp too.
You could try the HTML5 placeholder attribute for <input>s, depending on how supported you want this to be.
http://diveintohtml5.ep.io/forms.html
Example:
<input type="text" placeholder="John Smith" name="full_name" />
Otherwise you can take a look at the onblur and onfocus events for <input>.
Problem explanation
The thing is that you set color:white on the input field when it has focus. That's why caret (as well as content value text) disappears when in focus. It's still there though. It's just not visible. If you'd type some text in and then double click input you'd see that edited text exists (selecting it will make it visible)
A possible non-HTML5 scripted approach
You probably want to set some init text and then reset it when input has focus. And afterwards to stay as user set it. This very simple jsFiddle shows how. It uses jQuery to acomplish desired behaviour. You could as well adopt it to set init text back to what it was when input stays empty. But my simple example doesn't do that. It's rather trivial to do that as well by binding blur event to input as well, that would check value and when empty remove the CSS class and set init text back in.
It does use some scripting though. I don't think this can be done purely by HTML+CSS. It would when input was a container element so you could use pseudo elements ::before or ::after.