<html>
<table width="45%"><tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
<tr><td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh</td>
<td>
<input type="checkbox" name="mahesh" value="mahesh">Mahesh kunenaddsfsdfasdfasdfa</td></tr>
</table></html>
I want second check box name is to large, it should align properly below the name .
It should start from the name not form checkbox
you can use additional element - label, like this:
HTML:
<table width="45%">
<tr>
<td>
<input type="checkbox" name="mahesh1" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh1" name="mahesh1" value="mahesh"/>
<label for="maesh1"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="mahesh2" value="mahesh"/>Mahesh
</td>
<td>
<input type="checkbox" id="maesh2" name="mahesh2" value="mahesh"/>
<label for="maesh2"> Mahesh kunenaddsfsdfasdfasdfa</label>
</td>
</tr>
css:
label {
display: block;
white-space: nowrap;
}
fiddle:
http://jsfiddle.net/ywg632c3/2/
Related
So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.
<form align="center">
<p>Name:
<input type="text">
</p>
<p>Address
<input type="text">
</p>
<p>Email ID:
<input type="text">
</p>
<p>How many Peices of fruit<br>
do you eat per day?
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
</p>
<label>Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<p>Would you like a <br /> brochure?
<input type="checkbox" align="right">
</p>
<input type="submit">
</form>
How it was supposed to look like
How it looks like
I had a hard time understand how you had been writing this code:
<form align="center">
and
<input type="checkbox" align="right"/>
As align is not a valid attribute of an input or form tag.
But what it looks like is that it used, and has long since been removed.
https://www.w3.org/TR/html401/present/graphics.html#adef-align
Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:
So that suggests to me that you are using an old browser.
I recommend using the MDN documentation to see what is elements are supported.
However, if you are supporting outdated then that's a whole discipline in itself.
This page lists all available HTML attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.
<form>
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"> Email ID:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td align="right"> How many Peices of fruit do you eat per day?</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2 </td>
</tr>
<tr>
<td align="right">
Degree:
</td>
<td>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a brochure</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td> <input type="submit"></td>
</table>
</form>
Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.
Do you want like this? Only html:
<form>
<table align="center">
<tr>
<td align="right">Name </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Address </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Email ID </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td>
<label for="rdbGender">
<br>
How many Peices of fruit <br> do you eat per day?<br><br><br><br>
</label>
</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender">0<br>
<input type="radio" name="rdbGender" id="rdbGender">1<br>
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</td>
</tr>
<tr>
<td align="right">
<br>
<label for="degree">
My favourite fruit <br><br><br><br><br>
</label>
</td>
<td>
<select id="degree" multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a <br>
brochure
</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type="submit">
</td>
</table>
</form>
I suggest you to use CSS Grid to accomplish this job:
form {
display: grid;
grid-template-columns: 150px 200px;
text-align: center;
}
.first-column {
text-align: right;
}
input, select {
margin-left: 5px;
margin-bottom: 5px;
}
.check-area label {
display: block;
text-align: left;
}
.submit-button {
grid-column-start: 2;
text-align: left;
}
<form>
<label class="first-column">Name:</label><input type="text">
<label class="first-column">Address</label><input type="text">
<label class="first-column">Email ID:</label><input type="text">
<div class="first-column">
How many Peices of fruit<br>do you eat per day?
</div>
<div class="check-area">
<label>
<input type="radio" name="rdbGender" id="rdbGender">0
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">1
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">2
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</label>
</div>
<label class="first-column">Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<label class="first-column">Would you like a<br>brochure?</label>
<input type="checkbox" align="right">
<div class="submit-button"><input type="submit"></div>
</form>
I'm trying to get a list of radio buttons listed below eachother inside a
table data. Is this possible? Here is my current code
<table>
<tr>
<td> Voornaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Studentennr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Achternaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Klas </td>
<td> <select class="selectinp">
<option value="volvo">V1L</option>
<option value="saab">V1C</option>
<option value="mercedes">V1E</option>
<option value="audi">V1F</option>
</select>
</td>
</tr>
<tr>
<td> Adres </td>
<td > <input type="text" class="profiel_inp size2"> </td>
<td> Studierichting </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > BIM <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SIE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
</tr>
<tr>
<td> E-mail </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Telefoonnr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geslacht </td>
<td> Man<input type="radio" name="geslacht" class="profiel_inp">
Vrouw<input type="radio" name="geslacht" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geboortedatum </td>
<td> <input type="date" class="profiel_inp"> </td>
</tr>
</table>
with the CSS :
table {
width:100%;
margin-top:25px;
margin-bottom:25px;
}
input[type="text"], input[type="date"], .selectinp {
min-height:30px;
border:1px solid black;
padding:5px;
width:75%;
}
table tr {
padding-bottom:5px;
}
.size2 {
min-height:60px!important;
}
So ive got a table with a left and right side. Now on the left side is pretty basic but the right side has to contain a list of 4 radio buttons listed beneath eachother!
You could add them to a fieldset and wrap them in labels. Then in css set label display to block.
html
<td name="Studierichting">
<fieldset>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">BIM</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SIE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
</fieldset>
css
label {
display:block;
}
I'm wondering if possible to arrange two checkbox input fields vertically in same td cell? Below is example, there both of input fields are next to each other.
<table>
<tr>
<td>
<input type="number" />
<input type="checkbox" name="ck1" id="ck1">A
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
How about using a simple <br> with using text-align:right on the <td>?
<table>
<tr>
<td style='text-align:right'>
<input type="number">
<input type="checkbox" name="ck1" id="ck1">A<br>
<input type="checkbox" name="ck2" id="ck2">B
</td>
</tr>
</table>
I have the following HTML:
<tr>
<td class=tabTwo vAlign=top>
<table border=0 cellPadding=0 cellSpacing=0 width=100%>
<tr>
<td vAlign=top width=5%>4.</td>
<td>Test 1?</td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td>
</tr>
</table>
</td>
</tr>
Produces:
How do I made the radio buttons align in a straight line? B & C seem crooked.
If you are going to use a table. Put the inputs in their own cell. The letter width of a),b) etc. is what is throwing of the alignment.
I would not use a table though. Your choice.
Your question seemed a little vague but to best my knowledge, the presence of bullets a) b) c) in the same cell is causing the problem. Here's my fiddle: http://jsfiddle.net/bTNvA/
I have tried to resolve this by moving bullets to other cell:
<tr>
<td width=5%> a) </td>
<td colSpan=2> <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
HTML
<div class="form-wrapper">
<div class="radio-choice">
<span>a) </span>
<input id="option1" type="radio" name="opt1"/>
<label for="option1">Option 1</label>
</div>
<div class="radio-choice">
<span>b) </span>
<input id="option2" type="radio" name="opt2"/>
<label for="option2">Option 2</label>
</div>
<div class="radio-choice">
<span>c) </span>
<input id="option3" type="radio" name="opt3"/>
<label for="option3">Option 3</label>
</div>
</div>
CSS
.radio-choice * {
vertical-align: middle;
}
.form-wrapper div{
float: left;
clear: both;
}
.form-wrapper span {
display: inline-block;
width: 10px;
}
http://jsfiddle.net/NewwV/1/
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="id_radio"/>ID
</td>
<td>
<input type="radio" name="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>
Because name attribute in radio button must be the same in radio group.
Try this:
<input type="radio" name="somename" value="id_radio"/>ID
<input type="radio" name="somename" value="surname_radio"/>Surname
<input type="radio" name="somename" value="dob_radio"/>DoB
More info at w3c
The name attribute is what links radio buttons into a group. Use value for the actual value of each button.
<td>
<input type="radio" value="id_radio" name="btn_group"/>ID
</td>
<td>
<input type="radio" value="surname_radio" name="btn_group"/>Surname
</td>
<td>
<input type="radio" value="dob_radio" name="btn_group"/>DoB
</td>
It is because they all have a different name. Give them 1 name and they will act as a group:
<input type="radio" name="radioGroup" value='id'/>ID
<input type="radio" name="radioGroup" value='surname'/>Surname
<input type="radio" name="radioGroup" value='dob'/>DoB
http://www.echoecho.com/htmlforms10.htm
You have to have the same name for all of the radio inputs.
Your problem is that you have different names for each radio button in order for them to group together, they must have the same name, it looks like you are confusing name and value.
<body>
<form name="search_form" id="search_form" method="POST" action="search_user_data.php">
<table border="1">
<tr>
<td colspan="2">
<input type="text" id="search" name="search" />
</td>
<td>
<input type="submit" value="Search"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="searchType" value="id_radio"/>ID
</td>
<td>
<input type="radio" name="searchType" value="surname_radio"/>Surname
</td>
<td>
<input type="radio" name="searchType" value="dob_radio"/>DoB
</td>
</tr>
</table>
</form>
</body>