How to Disable Form Fields Using CSS

How do I disable form fields using CSS?

This can be helpful:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Update:

and if want to disable from tab index you can use it this way:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Disable Form Input with CSS

Here is the correct CSS selector:

input[name="rs:def:website"] {  pointer-events: none;}

<input type="text" name="rs:def:website" size="48" maxlength="64">

Can one disable an input field by pure css?

No you cannot disable the functionality of it via just CSS (since it is there just for styling purposes), though you can make it appear greyed out like a disabled button using CSS. To make it disabled in terms of functionality, you will have to resort to JavaScript.

With CSS all you can do is to style your button greyed out via CSS and then create another element over it making its z-index higher, setting position and opactiy to fully transparent. This would mean your actual element is enabled but one will not be able to click it because of element over it with full transparency.

Another solution is to just add pointer-events: none; to the style of the dom element, should work on most of the browsers.

Disable a textbox using CSS

CSS cannot disable the textbox, you can however turn off display or visibility.

display: none;
visibility: hidden;

Or you can also set the HTMLattribute:

disabled="disabled"

Set all form fields inside DIV disabled using CSS class

There are ways to do it with CSS, however none of them are actually effective, there are simple ways for users to get around CSS only methods. However here is an example anyway using css:

Your HTML:

<div id="con">
    <input name="name" type="text" value="Text input" />
    <span id="overlay"></span>
</div>

Your CSS:

#con {
    width: 300px;
    height: 50px;
    position: relative;
}
#con input[type="text"] {
    position: relative;
    top: 15px;
    z-index: 1;
    width: 200px;
    display: block;
    margin: 0 auto;
}
#con #overlay {
    width: 300px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: rgba(155,0,0, .5);
}

Example fiddle

As already mentioned, jQuery would be a much more reliable solution to this particular problem.

Enable and Disable input field using Javascript

Your buttons are submitting the form the are in, to not submit the form you'll have to use a type="button" button, also you've spelt getElementByID incorrectly its getElementById

<form>
    <table>
        <tr>
            <td><input id="input1" class="myText" type="text" placeholder="Row 1" /></td>
            <td><input id="input2" class="myText" type="text" placeholder="Row 1" /></td>
            <td><button type="button" onclick="toggleEnable('input1','input2')"> Enable/Disable </button></td>
        </tr>
        <tr>
            <td><input id="input3" class="myText" type="text" placeholder="Row 3" /></td>
            <td><input id="input4" class="myText" type="text" placeholder="Row 4" /></td>
            <td><button type="button" onclick="toggleEnable('input3','input4')"> Enable/Disable </button></td>
        </tr>
    </table>
</form>

    function toggleEnable(el1, el2) {
        document.getElementById(el1).disabled = true;
        document.getElementById(el2).disabled = true;
    }

http://jsfiddle.net/mowglisanu/aam7jg9t/

How to disable input field history using html

Simply set autocomplete="off" on your input element.

<input name="yourname" type="text" autocomplete="off"/>

Disable form fields and buttons when javascript is disabled by browser

Similarly to the concept of "mobile-first" where the desing of a website is made for mobiles and the @media rules are addded for larger screens...

Here you will write the HTML as "non-JS first".

Add the disabled attribute everywhere in the markup... And also add a meaningful class like nonJSdisabled to it.

So if JS is enabled, this will remove the disabled attributes where it needs to be removed:

document.querySelectorAll(".nonJSdisabled").forEach(function(item){
  item.setAttribute("disabled", false)
})

Same with jQuery:

$(".nonJSdisabled").prop("disabled", false);

$(".nonJSdisabled").attr("disabled", false);

You do not need anything special to know if JS is enabled. So there is no if condition at all. Just make sure the DOM is fully loaded to run that. ;)