Blocking a form input

HTML & CSS
1

I should KNOW THIS… but I guess I am missing something…

i am trying to create a from that has some check-boxes that are pre-selected. I dont want the user to be able to change this selection but I want the value to be submitted with the form. I would have guessed that this was a job for DISABLED , but that actually keeps the input for being submitted. I tried READONLY but that is still allowing me to check /uncheck the box…

what is the correct way to code this?
thanks all…

2

Wouldn’t that be for type hidden? It doesn’t seem intuitive to present an input that isn’t a choice. Unless I’m missing what you’re trying to do.

3

Well I want tolet the user know this value will be attributed, but I dont want him to be able to change the value .

4

You are out of luck really with a checkbox and HTML alone. Since DISABLED values aren’t submitted and READONLY basically applies to text and passwords rather than checkboxes. If you used TEXTAREA you would see read-only at work via a browser.

5

Could you cheat like this? :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input, label {
    z-index:-1;
    position:relative
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset class="preselected">
    <legend>Pre-selected for you</legend>
    <input name="check1" type="checkbox" id="check1" checked="checked" />
    <label for="check1">check1</label>
    <input type="checkbox" name="check2" id="check2" checked="checked" />
    <label for="check2">check2</label>
    <input type="checkbox" name="check3" id="check3" checked="checked" />
    <label for="check3">check3</label>
    <input type="checkbox" name="check4" id="check4" checked="checked" />
    <label for="check4">check4</label>
    </fieldset>
</form>
</body>
</html>

You’d have to make it specific of course with classes etc.

Opera is the only browser that doesn’t play ball with the above so you could do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input, label {
    z-index:-1;
    position:relative
}
.preselected{
    position:relative
}
.preselected b{
    position:absolute;
    z-index:99;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:red;
    opacity:0.1
}
</style>
<!--[if IE ]>
<style>
.preselected b{background:transparent}
</style>
<![endif]-->
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset class="preselected">
    <legend>Pre-selected for you</legend>
    <input name="check1" type="checkbox" id="check1" checked="checked" />
    <label for="check1">check1</label>
    <input type="checkbox" name="check2" id="check2" checked="checked" />
    <label for="check2">check2</label>
    <input type="checkbox" name="check3" id="check3" checked="checked" />
    <label for="check3">check3</label>
    <input type="checkbox" name="check4" id="check4" checked="checked" />
    <label for="check4">check4</label>
    <b></b>
    </fieldset>
</form>
</body>
</html>