How do I align the "remember me" box so that it comes to left side so that the checkbox should start with username and password text boxes start.
Current it is -
<tr>
<td colspan="2" class="buttons">
<label>
<input id="rememberme" name="rememberme" value="remember" type="checkbox" /> Remember me</label>
<input type="submit" name="login" value="Login" />
</td>
</tr>
Add a label around your "Remember Me" text and assign a class to it;
Then give that class the following style:
.aux {
float: left;
}
<tr>
<td colspan="2" class="buttons">
<label>
<input id="rememberme" name="rememberme" value="remember" type="checkbox" />
<label class="aux"> Remember me</label>
</label>
<input type="submit" name="login" value="Login" />
</td>
</tr>
Is this you're looking for?
you will need to remove margin for checkbox which is given by default
check for the first
Js Fiddle
.valign{
vertical-align: bottom;
}
input{
margin:0;
}
try to insert your form in a two columns table:
<table>
<tr>
<td>User Name:</td>
<td><Input type="text"/></td>
</tr>
<tr>
<td>Password:</td>
<td><Input type="password"/></td>
</tr>
<tr>
<td></td>
<td class="buttons">
<label><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> Remember me</label>
<input type="submit" name="login" value="Login"/>
</td>
</tr>
fiddle: http://jsfiddle.net/2wj86k32/
<tr><td class="buttons"><label>Username</label></td>
<td><input id="rememberme" name="rememberme" type="text" /></td></tr>
<tr><td class="buttons"><label>Username</label></td>
<td><input id="rememberme" name="rememberme" type="text" /></td></tr>
<tr><td class="buttons"></td>
<td><input id="rememberme" name="rememberme" type="checkbox" /><label>remember me</label><input type="submit" value="Login" /></td></tr>
Is it your need ?
Related
<fieldset style="width: 400px;">
<legend><h2>Form Validation</h2></legend>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="ime"></td>
</tr>
<tr>
<td>Username</TD>
<td><input type="text" name="username"></td>
</tr>
</table>
<input type="submit" value="Submit" name="send">
</form>
</fieldset>
I am currently making a form inside of a table... This is kind of new for me, since I don't know how to do it. Above is the code I have tried, and I need something like this.
If someone could get me on the right path, ill be really grateful.
Note: As you can see in the picture above, it needs to have colspan of 3, so they can all have equal width. I made a perfect one with just <form>, but i just found out we have to do it inside of a table...
The easiest way to do it is colgroup - there you can specify, how much of space of the table any column should take.
For your example it would be something like this: (plz note that I didn't feel all of needed rows)
<fieldset style="width: 400px;">
<legend><h2>Form Validation</h2></legend>
<form>
<table>
<colgroup>
<col width="40%"/>
<col width="60%"/>
</colgroup>
<tr>
<td>Name:</td>
<td><input type="text" name="ime"></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Re-type password:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender" />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" />
<label for="female">Female</label>
<input type="radio" id="other" name="gender" />
<label for="other">Other</label>
</td>
</tr>
<tr>
<td>Programming skills:</td>
<td>
<input type="checkbox" id="java"/>
<label for="java">Java</label>
<input type="checkbox" id="ruby"/>
<label for="ruby">Ruby</label>
<input type="checkbox" id="net"/>
<label for="net">.Net</label>
</td>
</tr>
</table>
<input type="submit" value="Submit" name="send">
</form>
</fieldset>
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>
It's my first time using HTML and would like to incorporate a checkbox that will enable or disable the "login" button if the user doesn't tick the checkbox to agree and enable the button when the box is tick.
<td>
<input style="width: 80px" name="username" type="text" value="$(username)" />
</td>
</tr>
<tr>
<td align="right" class="style6">Password</td>
<td>
<input style="width: 80px" name="password" type="password" />
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="submit" value="Login" />
</td>
</tr>
</table>
<div class="notice" style="color: #c1c1c1; font-size: 12px">
<br />
<input type="checkbox" name="checkbox" value="check" id="agree" />I agree to the statement above.
<br />
</div>
Just add the required attribute.
<form>
<input type="checkbox" name="1" value="1" required>
<input type="submit">
</form>
You can do it using a bit of javascript like this :
<input type="checkbox" name="checkbox" value="check" id="agree" onclick="if(this.checked){ document.getElementById('login').disabled=true; }else{ document.getElementById('login').disabled=false; }" />
You just have to give an ID to your submit button !
if you want to do it with javascript you can try this ( Use #Quention Solution in my opinion it's better )
document.getElementById("submit").disabled = true;
function agree() {
if (document.getElementById('agree').checked) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
}
}
<td><input style="width: 80px" name="username" type="text" value="$(username)" required/></td>
</tr>
<tr>
<td align="right" class="style6">Password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr>
<td> </td>
<td><input id="submit" type="submit" name="submit" value="Login" /></td>
</tr>
</table>
<div class="notice" style="color: #c1c1c1; font-size: 12px"><br />
<input type="checkbox" name="checkbox" value="check" id="agree" onclick="agree()" required/> I agree to the statement above.
<br q v/>
</div>
I have a 4x4 table of radiobuttons. In the first row (an extra row ABOVE the 4x4) I would like a button centered horizontally. I have tried colspan etc. but all still leave the radiobutton in a column like the others, and thus uncentered.
Obligatory Table-less Answer:
<div>
<div class="center"><input type='button' value='hello' /></div>
<ul class="radioList">
<li>
<label for="radio1">
<input type="radio" id="radio1" />
Checkbox 1</label>
</li>
<li>
<label for="radio2">
<input type="radio" id="radio2" />
Checkbox 2</label>
</li>
<li>
<label for="radio3">
<input type="radio" id="radio3" />
Checkbox 3</label>
</li>
<li>
<label for="radio4">
<input type="radio" id="radio4" />
Checkbox 4</label>
</li>
</ul>
</div>
.center { text-align:center; }
.radioList {
list-style:none;
width:100%;
}
.radioList li {
float:left;
width:25%;
}
http://jsfiddle.net/Amudt/
http://jsfiddle.net/EJbny/
<table style='width:100%;' border=1>
<tr>
<td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>
Like this? Just use CSS and the text-align:center rule on the top row. Here's a jsFiddle example.
<table>
<tr>
<td colspan="4" style="text-align:center"><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
</table>
<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>