I'm having issue with an html/css contact form. Ideally, I'd like the 'label' and 'input' to be level with eachother, with a 1px border-bottom extending from the label to a defined endpoint(not a defined width). Is this possible? What am I missing?
<div id="contact">
<div id="invite">
<h1>Let's Talk.</h1>
<h2 class="postinfo">
<p>Have you got a project needing an eye for detail and a creative touch? <br>I'd love to hear from you. </p>
</h2>
</div><!-- end invite -->
<form action="#" method="post">
<fieldset>
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
<input type="submit" value="Send" />
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</div><!-- end contact -->
#contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
#invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
#form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
#form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
#form fieldset label {
padding-right: 50px;
}
#form fieldset input {
width: 300px;
}
http://i.stack.imgur.com/B6wF8.png
I played around with your code a bit and this is what I came up with:
Here is your HTML:
<contact>
<form action="#" method="post">
<fieldset>
<div class="clear">
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
</div>
<div class="clear">
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
</div>
<div class="clear">
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
</div>
<div class="clear">
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
</div>
<div class="clear">
<input type="submit" value="Send" />
</div>
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</contact><!-- end contact -->
and here is your CSS:
body { font-family:arial,helvetica,sans-serif ;
font-size:14px ;
font-weight:bold ;
}
h1 { font-size:16px ;
margin:0 ;
padding:0 ;
}
contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
contact invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
contact form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
contact form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
contact form fieldset label { width:100px ;
float:left }
contact form fieldset input {
width: 200px;
float:right ;
}
.clear { clear:both ;
line-height:30px ;
}
You'll need to play with your label and input widths depending on the font size you use.
Best,
Cynthia
Related
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I want my web page to display a check box inside the password field. User clicks on the check box and see the password as text. On un-check, its password again.
This is what I want. This is from the Ebay website login page.
This is what I am getting
I want this checkbox inside the password field. I could not find anything online on this topic.
Here is my code :
<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
Just add CSS and move your checkbox to one group div with input text.
See the example
#eye {
position:absolute;
right:50px;
top:6px;
}
Click Here
This would be the solution.
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span>
</div>
input#eye {
position: absolute;
right: 10px;
top: 10px;
}
#reg_password.form-control.input-lg {
position: relative;
}
.parent{position:absolute;}
<!-- Set a password for the account -->
<div class="col-md-12 parent" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
</div>
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
transition: right 0.2s;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#password").click(function () {
if ($("#reg_password").attr("type")=="password") {
$("#reg_password").attr("type", "text");
}
else{
$("#reg_password").attr("type", "password");
}
});
});
</script>
I am trying to align a form's text fields to the right side of the div in which they are contained. I have this for css:
application.css
#loginform {
width: 400px;
height: 300px;
background: rgba(237,191,92, 1);
margin-left: 0px;
padding: 10px;
}
#usertext, #passtext {
text-align: left;
}
#loginuser, #loginpass {
text-align: right;
}
#submitbutton {
text-align: center;
}
Here is my html:
indexform.php
<div id="loginform">
<form id="login" method="post" action="checklogin.php">
<h1>Member Login</h1>
<div id="usertext">
<p>Username:</p>
</div>
<div id="passtext">
<p>Password:</p>
</div>
<div id="loginuser">
<input name="myusername" type="text" id="myusername">
</div>
<div id="loginpass">
<input name="mypassword" type="password" id="mypassword">
</div>
<div id="submitbutton">
<input type="submit" name="Submit" value="Login">
</div>
</form>
</div>
What happens now:
Username:
Password:
|--username textfield--|
|--password textfield--|
|-login button-|
The text fields should be lined up to the right of the "Username:" and "Password:" labels.
I did this
DEMO
<div id="loginuser">
<input name="myusername" type="text" id="myusername">
</div>
<div id="usertext">
<p>Username:</p>
</div>
<div id="loginpass">
<input name="mypassword" type="password" id="mypassword">
</div>
<div id="passtext">
<p>Password:</p>
</div>
and
#loginuser, #loginpass {
float: right;
}
This is the HTML
<div id="header">
</div> <!-- end header -->
<div id="main">
<div id="stylized" class="myform">
<form id="form" name="form">
<label>Name
<span class="small">of company, business, etc...</span>
</label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span>
</label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu
</label>
<input type="text" name="url" id="url"/>
<button type="submit">Submit</button>
<div class="spacer">
</div>
</form><!-- end form -->
<div id="stylized1" class="myform1">
<form id="form1" name="form">
<label>Street Address
</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City
</label>
<input type="text" name="city" id="city"/>
<label>State
</label>
<input type="text" name="state" id="state"/>
<label>ZIP
</label>
<input type="text" name="zip" id="zip"/>
<div class="spacer">
</div>
</form><!-- end form1-->
</div><!-- end stylized -->
</div><!-- end main -->
</div><!-- end container -->
</body>
</head>
This is the CSS
#container {
margin: auto;
width: 800px;
}
#header {
position: relative;
height: 147px;
background: url(images/header.png) no-repeat;
}
#main {
position: relative;
height: 653px;
background: url(images/main.png) no-repeat;
}
#form {
color: #c4c1c1;
margin: 100px 20px 0px 10px;
}
.spacer{
clear:both;
height:1px;
}
#stylized{
border:solid 2px #c4c1c1;
}
#stylized label{
display:block;
font-family: arial;
font-weight:bold;
width:140px;
margin: 2px 0 0px 10px;
}
#stylized .small{
color:#c4c1c1;
display:block;
font-size:12px;
font-weight:normal;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin:133px 0 0px 100px;
width:125px;
height:31px;
text-align:center;
line-height:3px;
color:4b4b4b;
font-size:15px;
font-weight:bold;
}
#stylized1{
position: relative;
margin: -1600px 0px 10px 450px;
}
The top margin, no matter how many times I change it, never has the correct coordinates. Every time I change the margin, it just goes back to the same place visually. How come? Is it because of the #container width? Or do I need some code? I'm fairly new to this. Thanks for your help.
#stylized1 label{
display:block;
float:left;
font-family: arial;
font-weight:bold;
width:140px;
color:#c4c1c1;
margin: 2px 0px 0px 10px;
}
#stylized1 input{
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:0px 0px 20px 10px;
}
Cut and paste are your enemy. I doubt you want duplicate forms, one or each half of the form entry. Also, you are using position relative all over the place. If you are doing that then you are probably doing something wrong. In this solution I floated the two entry divs to the left. You can adjust the top-margin on stylized1 to position it. I also cleaned up a lot of your html structure.
I was kind of assuming you were editing top margin on the element with -1600px, but if I am wrong please let me know which one you were editing margins on.
http://jsfiddle.net/fVh23/
<div id="container">
<div id="header"></div> <!-- end header -->
<div id="main">
<form id="form" name="form">
<div id="stylized">
<label>Name
<span class="small">of company, business, etc...</span></label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span></label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu</label>
<input type="text" name="url" id="url"/>
</div> <!-- end stylized -->
<div id="stylized1">
<label>Street Address</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City</label>
<input type="text" name="city" id="city"/>
<label>State</label>
<input type="text" name="state" id="state"/>
<label>ZIP</label>
<input type="text" name="zip" id="zip"/>
</div><!-- end stylized1 -->
<br style="clear: both;" />
<button type="submit">Submit</button>
<div class="spacer">
</form><!-- end form1-->
</div><!-- end main -->
</div><!-- end container -->
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard