I'm having trouble with the validation when using Metro4 and Razor forms. The trouble is from the decorations that Metro4 applies.
<InputNumber #bind-Value="foo.Bar" data-role="input" />
turns into
<div class="input valid">
<input step="any" data-role="input" type="number" class="modified invalid" _bl_ddd3dac7-42f3-4e4b-acb7-539f05011234="" data-role-input="true" aria-invalid="true">
<div class="button-group"><button class="button input-clear-button" tabindex="-1" type="button"><span class="default-icon-cross"></span></button></div></div>
The outer div class has input valid, but I don't want that, I want the inner input, invalid modified.
so I set
div.input.valid, label.select.valid {
border: 1px solid #000!important;
}
but that really doesn't solve my issues. It just turns the border black. I also found out there's no way to base an outer div on its child, so I would have to use jQuery.
All of this work, and it occurs to me that maybe someone knows a simpler way.
Related
How to prevent user-selection / highlighting of an <input>?
This:
input {
user-select: none;
}
<input type="number" value="123" />
and the methods from How to disable text selection highlighting and CSS disable text selection and don't work on an input.
Note: if possible, I don't want to put the input on disabled mode.
You can hide the selection like this:
input::selection {
background-color:transparent;
}
The illusion will be broken if the user drags the text after selecting it, but I don't think there's any other way to do it.
(Why would you want to do this though)?
You could try to (almost instantly) remove the selection when someone selects something inside the input element with .getSelection().removeAllRanges();.
It is still possible to copy the text if someone is quick.
$("input").select(function() {
window.getSelection().removeAllRanges();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">
You can improve this by making it look like text is not selectable (see Samuel's answer), I added it into an extra code snippet:
$("input").select(function() {
window.getSelection().removeAllRanges();
});
input::selection {
background-color:transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">
After all of this you can also make it imposible for the user to copy anything inside an input field by adding onCopy="return false" to the input field. (It is still selectable but not possible to copy).
<input type="number" value="123" onselectstart="return false" oncopy="return false;" />
You might only want to use 1 or a combination of 2 of those things inside your project. Combine the things you need and you can make an unselectable/uncopy-able input field.
You can also disable cutting/pasting or right clicking according to this article.
Reading your requirements, it seems you'd probably fulfil them best by not using user-facing number input at all, or more precisely, progressively enhance it to some "ticker" structure.
Such progressively enhanced number input without possibility to select the value could be something like:
<form onsubmit="alert('Value is: ' + this.v.value); return false">
<label for="o">Value: </label>
<!-- Displays the value: -->
<output id="o" for="plus minus"
style="min-width: 2em;
display: inline-block;
text-align: right; border: 1px solid;
padding-inline: .5em;
user-select: none;
/* user-select: none; is probably not necessary here anymore
since keyboard input here does not affect the value
*/
">0</output>
<!-- Holds actual value: -->
<input name="v" type="hidden" value="0" onchange="o.value=value">
<!-- Controls: -->
<button id="plus" type="button" aria-label="Increase value"
onclick="v.value=Number(v.value)+1;v.onchange()"
>+</button>
<button id="minus" type="button" aria-label="Decrease value"
onclick="v.value=Number(v.value)-1;v.onchange()"
>-</button>
<hr>
<input type="submit">
</form>
(Again, this structure is for demonstration only, underlying element should be regular number input. Both should work with screen readers and other assistive technologies, but haven't verified this one ATM.)
This seems to work, as a first approximation:
input {
pointer-events: none;
}
<input type="number" value="123" />
My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...
While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here
Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with Insightly..
Thanks in advance for any help!
[EDIT 1]
Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...
<style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
The key to attractive layouts is DIVs and CSS.
First, use DIVs to group the various input areas, and to divide each area into left/right (via float).
For example, you might want the label and the input fields to be nicely aligned:
.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>
The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.
You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.
DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.
*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.
Here is a jsFiddle of the above demo that you can experiment with.
Consider below html code, which uses bootstrap 3 input group to create an input three input groups.
<h1>border radius</h1>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input value="false" type="radio"/>
</span>
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">?</span>
</div>
</div>
</div>
The default bootstrap style puts border radius for all input groups, which is not good for the middle input groups (I mean the tiny left radius around * ).
To remove this radius, I try to set the border radius for all input groups to zero except the last one.
div.input-group > div.input-group > span.input-group-addon:not:last-child{
border-radius: 0px !important;
}
But it did not work !
Please let me know what is wrong with this selector, and if I can do it easier !
fiddle : http://jsfiddle.net/mtamx8bs/
:not() is a functional pseudo-class so it needs parentheses around its argument:
div.input-group > div.input-group > span.input-group-addon:not(:last-child)
And on that note I removed the !important as it's no longer needed now that I've fixed the selector.
Due to the way that Bootstrap applies the rounded border styling to the .input-group-addon class, only the first and last "addon" within an .input-group will end up with rounded corners.
Based on this, I'd suggest you consider wrapping all your required elements in a single input group, rather than trying to nest one inside the other.
For example:
<div class="input-group">
<span class="input-group-addon"><input value="false" type="radio"/></span>
<span class="input-group-addon">*</span>
<input type="text" class="form-control" />
<span class="input-group-addon">?</span>
</div>
I updated your fiddle with these changes if you want to play with it. (Edit: or check this one for a slightly more verbose version, showing how much cleaner the code looks with multiple groups)
As an extra note: there are some cases where you may end up nesting different types of "group" classes from Bootstrap, but you'll probably need to play with them to work out which combinations will achieve exactly what you want.
This page in the docs shows an example of two button elements (normal button and a drop-down button) inside an .input-group-btn class, which is nested inside an .input-group.
I have created some simple Javascript to make a checkbox seem re-skinned that hides the checkbox and basically just pulls in a background image through CSS to show the checks/unchecks.
Is this HTML/CSS for hiding the checkbox accessible? I want to be as compliant as possible and am uncertain about the hiding and my label. Currently this is how it looks..
CSS:
.checked:hover, .unchecked:hover
{
background-color: #242424;
}
.checked
{
background-image: url(check.bmp);
color: #ffb500;
}
.unchecked
{
background-image: url(unchecked.bmp);
}
HTML:
<label for="cbAll" class="checked" id="lblAll">
<input id="cbAll" type="checkbox" name="cbAll" checked="checked"/>
ALL </label>
If you're worried about accessibility, I'd say that looking at others' (especially professionally written) code would be the best. jQuery UI is the one that immediately comes to mind. If you look at the code generated by jQuery UI's button widget, part of whose purpose is to serve as a checkbox replacement.
Original HTML:
<input type="checkbox" id="check" /><label for="check">Toggle</label>
Generated HTML:
<input type="checkbox" id="check" class="ui-helper-hidden-accessible" />
<label for="check" aria-pressed="false" class="[redacted]" role="button" aria-disabled="false">
<span class="ui-button-text">Toggle</span>
</label>
Notice the conformation to the WAI-RIA specification, with the correct use of the role attribute to indicate the role taken on by the label element as a button (the original input element is hidden, and thus ignored by screenreaders). You should have a look at the specifications if you want to know how to build things like this in an accessible manner.
Take a look at http://lipidity.com/fancy-form/
You can see how they do it and incorporate it in your own implementation.
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
How do I make a <input type=button> act like a hyperlink and redirect using a GET request?
You can make <button> tag to do action like this:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
or:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
It's simple and no javascript required!
NOTE:
This approach is not valid from HTML structure. But, it works on many modern browser. See following reference :
For <button>; and
For <input type="button />
There are several different ways to do that -- first, simply put it inside a form that points to where you want it to go:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
This has the advantage of working even without javascript turned on.
Second, use a stand-alone button with javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This however, will fail in browsers without JavaScript (Note: this is really bad practice -- you should be using event handlers, not inline code like this -- this is just the simplest way of illustrating the kind of thing I'm talking about.)
The third option is to style an actual link like a button:
<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
Go to my link location
</div>
This has the advantage of working everywhere and meaning what you most likely want it to mean.
<script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
Here's the other way, it's simpler than the other one.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It's simpler.
For those who stumble upon this from a search (Google) and are trying to translate to .NET and MVC code. (as in my case)
#using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will show a button labeled "Process" and take you to "/Process/RemoveLostRolls".
Without "FormMethod.Get" it worked, but was seen as a "post".
Do not do it. I might want to run my car on monkey blood. I have my reasons, but sometimes it's better to stick with using things the way they were designed even if it doesn't "absolutely perfectly" match the exact look you are driving for.
To back up my argument I submit the following.
See how this image lacks the status bar at the bottom. This link is using the onclick="location.href" model. (This is a real-life production example from my predecessor) This can make users hesitant to click on the link, since they have no idea where it is taking them, for starters.
You are also making Search engine optimization more difficult IMO as well as making the debugging and reading of your code/HTML more complex. A submit button should submit a form. Why should you(the development community) try to create a non-standard UI?
I think that is your need.
a href="#" onclick="document.forms[0].submit();return false;"