I often form elements that are blanked out (e.g. the content is un-editable, you can't focus, gray overlay). What styling or attribute is applied to the form elements to create this effect?
Any answers will be very much appreciated :).
disabled="1" / or just disabled. e.g. <input disabled="1" ...
The form element is disabled;
See here
you create a disabled input like this:
<input type="text" name="fieldname" disabled="disabled" />
This also works for all other form elements except elements with type='hidden'
You should be using the disabled attribute:
HTML button disabled Attribute
HTML input disabled Attribute
The disabled attribute specifies that a button should be disabled.
A disabled button is unusable and un-clickable.
The disabled attribute can be set to keep a user from clicking on the
button until some other condition has been met (like selecting a
checkbox, etc.). Then, a JavaScript is required to remove the disabled
value, and make the button usable.
The syntax use is:
<button disabled="disabled">
<input disabled="disabled" />
there is disabled to create the grey overlay
<input disabled type="text" name="myInput">
and readonly to make it focus but uneditable
<input readonly type="text" name="myInput">
Related
Is there a css or html only way to prevent a user from typing in an input field?
I want to dynamically add stuff and remove stuff etc to an input field but I don't want the user to be able to edit it and using the disable attribute on the html tag prevents me from doing what I want.
You can use readonly or disabled attribute.
The drawback to using disabled is that the value of the disabled element won't be submitted when the form is.
You'll likely want readonly. Which can easily be styled to look like a disabled element.
document.getElementById('test').value = 'Hello World!';
[readonly] {
border: 1px solid #ccc;
background-color: #eee;
}
<input type="text" id="test" name="test" readonly>
You can use the attribute readonly - read about it here
Yep, you can just set the input element's disabled property to true. That will prevent the user from modifying its contents, but you can do what you like with it by using Javascript to modify its value property.
add readonly to it
<input type="text" value="Hello" readonly />
Uhm.....
<input type="text" name="myInput" value="Whatever" readonly="readonly" />
More here: What is the correct readonly attribute syntax for input text elements?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
OR JQUERY
$('#fieldname').attr('disabled', 'disabled'); //Disable
$('#fieldname').removeAttr('disabled'); //Enable
I want to make textarea non-editable and non-clickable using html.
I have given the "readonly=true" for the tags; however, it is still clickable but non-editable. The readonly textarea are getting selected in Safari browser. Please help. I do not want the text area and text box to get selected.
Thanks
Using readonly attribute on element means that the element is not editable, however the value of field gets submitted when the form is submitted.
While disabled element is not editable as readonly but its value doesn't get submitted on form submission.
so, if you want to submit the value of the field, use:
<input type="text" name="textbox1" readonly />
else
<input type="text" name="textbox1" disabled="disabled" />
Try disabled="disabled". This will disable textbox / textarea, so it won't be selected. Also, the value won't be submitted on form submission.
For textbox :
<input type="text" name="textbox1" disabled="disabled" />
For textarea :
<textarea name="textarea1" disabled="disabled" /></textarea>
In HTML5, only disabled attribute will also work. The value is not compulsory. However, for XHTML Strict you will need key & value pair.
<textarea disabled="disabled"></textarea>
Try this i hope it works,
<input type="text" name="country" value="anytext" readonly>
Why don't you try with
disabled="disabled"
I understand the for attribute specifies which form element a label is bound to.
Do you have an example where this would be actually useful?
It's most useful for a checkbox label where it will make the whole label clickable so you don't have to target the checkbox itself to toggle its state. Same for radio buttons.
<label for="email">E-mail:</label>
<input type="text" id="email" name="email"/>
Now if you click on "E-mail", the corresponding input element will get focused.
<label for="name">Name</label>
<input type="text" id="name" />
http://jsfiddle.net/jRB2s/3/
Clicking on the label will give focus to the element with the same ID as the for value.
For radio buttons or checkboxes, it will toggle their status as if you were clicking on them.
This is really useful expecially on handheld devices, where it's not always simple to click the desired form control.
It's there for semantic purposes. It's useful for screen readers and such as well as, potentially, search engines. Browsers will also connect controls to their labels (e.g. checkboxes will activate when clicking a label) and you can apply shortcut keys to labels which will focus their controls when pressed.
There are two formats for labels:
<label>Label<input ... /></label>
which doesn't require a for attribute. And
<label for="control">Label</label>
<input id="control" name="control" ... />
which may be required when the label and input are separated (e.g. a table).
I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.
Is there some way we can assign a "form id" to the inputs?
In HTML5, you can use the form attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" /> worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.
<input class="checkbox" id="staff_recruiting" name="company_type"
value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">
$('#search-keyword').keyup(function() {
$('#search-keyword-input').val($(this).val());
});
Your problem will be solved bro:
Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.
I have some fields that are currently input fields. Some should allow edits and others not. Without changing them from input fields, is there a simple way to make it so I cannot edit these? I'm looking for just one CSS or other kind of property if that exists.
thanks
Mariko
You can add the readonly="readonly" attribute to the input elements.
Or disabled: <input disabled>
You can style both with CSS:
input:disabled or input[disabled] for disabled
input[readonly] for readonly
<input type="text" id="id" name="id" value="" readonly="readonly" />
either
<textarea ... readonly="readonly"></textarea>
and/or :
<textarea ... disabled="true"></textarea>
I prefer readonly -attribute, which just prevents modifying. Disabled attribute makes the whole area look disabled (grey) and disabled textarea's data isn't submitted, when a form is posted.