Text field appearing with along radio buttons, where my form does not have a text input

Question

enter image description here I get this when i run my code. I have no text inputs but I am seeing text inputs along with radio buttons when I run this.

<script>

function validateForm() {
    var x = document.forms["myForm"][0].value;
    if (x == null || x == "") {
        alert("i must be checked");
        return false;
    }
 var y = document.forms["myForm"][1].value;
    if (y == null || y == "") {
        alert("j must be checked");
        return false;
    }
    var z = document.forms["myForm"][2].value;
    if (z == null || z == "") {
        alert("k must be checked");
        return false;
    }
}
</script>

<body>
<form name="myForm" onsubmit="return validateForm()">
<input type="radio" name="i">click<input/>
<input type="radio"name="j">click<input/>
<input type="radio"name="k">click<input/>
<input type="submit" value="submit">
</form>
</body>

When i inspect element i am seeing some thing likr this in styles input, textarea, keygen, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } i dont know where is comes from. its says "user agent style sheet" — jophab, May 05 '16 at 09:26
These are browser's default css. To remove this css refer above link http://stackoverflow.com/questions/18006356/chrome-how-to-turn-off-user-agent-stylesheet-settings — Sachin K, May 05 '16 at 09:32

score 1 · Accepted Answer · answered May 05 '16 at 09:22

1

You are using these empty input tags in the end of each radio, input tag by default renders as text box

<input/>

Also, you must close your radios with the closing tag

<input type="radio" name="i" />click

answered May 05 '16 at 09:22

Pawan Nogariya

8,330
12
52
105

score 0 · Answer 2 · answered May 05 '16 at 09:14

0

the input tag should not have any value within.

Use a label instead, like this:

<input type="radio" name="i" id="i1" />
<label for="i1">click</label>

answered May 05 '16 at 09:14

Fabrizio Stellato

1,727
21
52

score 0 · Answer 3 · answered May 05 '16 at 09:22

The second input tag on each line is not correct; each time you have <input type="radio"name="k">click<input/> then the browser interprets this as

<input type="radio"name="k" /> (automatically adds self-closing slash)
click
<input type="text" /> (gives the closing input tag type="text" by default)

To fix this, your inputs should look like this:

<input type="radio"name="k" /> click

(notice the slash inside the radio input tag)

Text field appearing with along radio buttons, where my form does not have a text input

3 Answers3