I have a site that I'm creating, part in static HTML, the other part is served via Django. Since I want the look and feel to remain the same (who doesn't?) I have used CSS for the static site. That same CSS I have included (almost successfully) in the dynamic site.
When I create a form, I can get a very nice two column listing on the static side
Label Input
Label Input
Label Input
But, when I do the same code on the dynamic side, it's not so nice
Label Input
Label Input
Label Input
The CSS I'm using is:
form.login label.fixedwidth {
display: block;
width: 240px;
float: left;
}
\.
Sorry, here's my form:
<form action="" method="post" class="login">
<fieldset>
<div>
<label for="username" class="fixedwidth">User name:</label>
<input type="text" name="username" value="" id="username">
</div>
<div>
<label for="password" class="fixedwidth">Password:</label>
<input type="password" name="password" value="" id="password">
</div>
<input type="submit" value="login" />
</fieldset>
</form>
[edit]
So, I noticed that my two 'input type' lines didn't close the tag (no '/'). But, no difference.
[/edit]
Try
clear:both; overflow: auto
on the surrounding DIV.
By the way, a <ul> with <li> s may be semantically more fitting than <div>s here. Won't make a difference in the output though.
Related
I am trying to use below code in the WordPress Code Block or Text Block. But by adding , it removes the entire code from the Code Block and showing form outside in the WordPress editor screen with lot of junk characters.
<style>
.leftCol
{
width: 47%;
}
.rightCol
{
width: 47%;
float: right;
}
</style>
<form action="../process.php" method="post" name="myForm">
<div class="rightCol">
Name <input id="name" type="text" name="name" />
Phone <input id="" type="number" name="phone" />
</div>
<div class="leftCol">
Email <input id="email" type="text" name="email" />
Company <input id="comp" type="text" name="comp" />
</div>
<input type="submit" value="Submit" />
</form>
How can I use this line of code
<textarea width='100'></textarea>
within the form code.Please share an example.
Why dont you create a specific template for the page you need to insert the form. With it you can control the look and the structure without having wp filters stripping your tags..
add page-yourSlug.php to your current theme. Copy code from page.php and customize accordingly. yourSlug is the id or name of the page you creating.
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
In my html form the word message is showing at the bottom-left of the textarea, How can I adjust it on the top-left of textarea? img - http://img641.imageshack.us/img641/415/htms.jpg
<form name="reg_form" method="post" action="home.php">
First Name:
<input type="text" name="f_name"/><br/> <br/>
Last Name:
<input type="text" name="l_name"/><br/> <br/>
Your Email:
<input type="text" name="new_email"/><br/> <br/>
Re-enter Email: <input type="text" name="check_email"/><br/> <br/>
Message: <textarea cols="30" rows="10" name="message"></textarea>
</form>
You'll need to use a <label> tag to put your, well, labels in. Then using some CSS you can align it to the top of the <textarea> using this:
label
{
display: inline;
vertical-align: top;
}
HTML:
<form>
<label>Message:</label>
<textarea></textarea>
</form>
There's a live example I made here.
In other news
Your technique of spacing the inputs using isn't the best. For one, different fonts have different space widths and secondly, it makes your code look rubbish. You can get around this by using <label>s with CSS inline-block. There's a working example here.
I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
http://wufoo.com/gallery/templates/
You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.
This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it.
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div> cluttering things up. You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
I would lookup using the div tag to layout data on a page.
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
View source here on stackoverflow.com, there's probably some good examples.
Think about putting field names above the field, rather than beside. I find this works about the best.
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.