I have a login form on the JSP page.
It is almost perfect except that the text field is not align up correctly. I want my text field to look like Facebook's login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</p>
</form>
</div>
</body>
</html>
The above is my JSP script and I appreciate someone could help me.
Start by taking the input tag out of the label. This will align the label on the left of the input field. To make the label appear above the input field give it a style of display: block;
Not sure if this is what you mean, but you can give the form elements id's and then control them with css like any other element. For example:
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
#idBox {
margin-left: 45px;
}
#lastRow {
margin-left: 65px;
}
</Style>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id" id="idBox"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<div id="lastRow">
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</div>
</p>
</form>
</div>
jsFiddle
do this in HTML:
<p>
<label for="id">
ID
</label>
<input type="text" name="id"/>
</p>
<p>
<label for="password">
password
</label>
<input type="password" name="password"/>
</p>
and this in CSS:
label{
display:block;
}
My css isn't the greatest but i adapted this from the visual quickstart html5 and css book
latest edition. All you do is change text-align to left or right to align the label down the right hand side or the left. If that makes sense. Hope this helps.
<form>
<ul id="about_me">
<li><label>My Height</label>
<select class="about" name="height">
option value="">Choose from list</option>
</select>
</li>
</ul>
</form>
ul#about_me label
{
display:inline-block;
padding:3px 6px;
text-align:left;
width:170px;
vertical-align:top;
}
Related
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="utf-8">
<title> Contact page </title>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li> Index </li>
<li> Learning Log </li>
<li> Contact </li>
</ul>
</nav>
</header>
<h1> Contact page </h1>
<form>
<fieldset>
<legend>Contact Information</legend>
<p><label >first_name*: <input type="text" name="first_name*" required></label></p>
<p><label >last_name*: <input type="text" name="last_name*" required></label></p>
<p><label >phone_number*: <input type="number" name="number*" required></label></p>
</fieldset>
<fieldset>
<legend>Radio</legend>
<label > contact_permission* </label><br>
<input type="radio" name="rating" required value="1 hour"> Yes <br/>
<input type="radio" name="rating" value="2 hours"> No <br/>
</fieldset>
<fieldset>
<legend>Dropdown List</legend>
<label>best_time_to_contact*: </label>
<select required>
<option value="">Please Select</option>
<option value="1"> Morning</option>
<option value="2"> Afternoon</option>
<option value="3"> Evening</option>
</select>
</fieldset>
<fieldset>
<legend>Check box</legend>
<label > how_can_i_contact_you </label><br>
<input type="checkbox" name="Phone" value="Phone"> Phone<br>
<input type="checkbox" name="Email" value="Email"> Email <br>
</fieldset>
<br>
<input type="submit" name="Submit" value="Submit">
</form>
</div>
</body>
</html>
Not quite sure how to go about this, i have tried to do text-align: left and text-align: right within the style section but no changes occur when I add this. I don't know any other way to do it. https://jsfiddle.net/tyvx60zc/ here is a jsfiddle of the code with my external css. any help would be greatly appreciated
label {
display: block;
text-align: initial;
}
label>input {
float: right;
}
Remove text-align: center; from the wrapper, and instead use:
input {
display: inline-block;
position: relative;
}
label {
display: inline-block;
width: 200px;
text-align: right;
}
https://jsfiddle.net/abalter/tyvx60zc/1/
FWIW, I also prefer using <label for="...
Add the following CSS into your CSS file:
p label{
width: 35%;
display: inline-block;
text-align: left;
}
p label input{
float: right;
}
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
I have loggin form and I'd like it to position to center of the page. My code is:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin-left:auto;
margin-right:auto;
}
.align {
position: absolute;
left: 8em;
}
</Style>
</head>
<body>
<div class="ex">
<h1>签订</h1>
<hr>
${errorMessage}
<form action="register" method="post">
<p>
<label>
ID：
<input type="text" name="id" value="${person.id}" class="align"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
确认密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
姓名：
<input type="text" name="name" value="${person.name}" class="align"/>
</label>
</p>
<p>
<label>
地址：
<input type="text" name="address" value="${person.address}" class="align"/>
</label>
</p>
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
Everything is now position at the center except all text field are positioned outside the login boxes.
I appreciate if someone could help me the problem.
Add the following line to the rule of div.ex:
position:relative;
By establishing a new positioning context all child elements which have position:absolute are now positioned relatively to this div instead of the body of the page.
Demo.
I have some text in a link "title" and also a form box and I want the text on the left and the form on the right. However, whenever I try to do this what comes out is the line of text and then the form appears BELOW the text. I want them on the same horizontal line.
So I want with the dots: TEXT ................................. SIGN IN BOX
here is the code:
<div id="container">
<a href="index.php"><font size="6">Title</font><a>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset>
</div>
Here is the CSS for the container:
#container {
margin:0 auto;
position:relative;
width:780px;
}
and topnav
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
}
How do I accomplish the task? Thanks
DIV is a block element so will always do that. You need to make it a non-block element by setting float and display.
Besides the solution below you could use a table but that is frowned upon.
<div id="container">
<div class="titleDiv"><a href="index.php"><font size="6">Title</font><a></div>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset></div>
</div>
Then set your CSS to this:
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
float:left; display:inline;
}
.titleDiv
{
float:left; display:inline;
}
so you want div.topnav appear on the left of the a ? Easiest would be to replace div with a non-block element such as span... otherwise see float css style