I'm trying to make this:
<form id="simple-search" name="simple-search" action="/search/" method="POST">
<label for="simple-search-address">Location/Address</label>
<input type="text" id="simple-search-address" name="address" value="" />
<label for="simple-search-dob-day'">D.O.B.</label>
<select name="dob-day" id="simple-search-dob-day"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
<select name="dob-month" id="simple-search-dob-month"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
<select name="dob-year" id="simple-search-dob-year"><option value="0">2009</option><option value="1">2008</option><option value="2">2007</option><option value="3">2006</option><option value="4">2005</option><option value="5">2004</option><option value="6">2003</option><option value="7">2002</option><option value="8">2001</option><option value="9">2000</option><option value="10">1999</option><option value="11">1998</option><option value="12">1997</option><option value="13">1996</option><option value="14">1995</option><option value="15">1994</option><option value="16">1993</option><option value="17">1992</option><option value="18">1991</option><option value="19">1990</option><option value="20">1989</option><option value="21">1988</option><option value="22">1987</option><option value="23">1986</option><option value="24">1985</option><option value="25">1984</option><option value="26">1983</option><option value="27">1982</option><option value="28">1981</option><option value="29">1980</option><option value="30">1979</option><option value="31">1978</option><option value="32">1977</option><option value="33">1976</option><option value="34">1975</option><option value="35">1974</option><option value="36">1973</option><option value="37">1972</option><option value="38">1971</option><option value="39">1970</option><option value="40">1969</option><option value="41">1968</option><option value="42">1967</option><option value="43">1966</option><option value="44">1965</option><option value="45">1964</option><option value="46">1963</option><option value="47">1962</option><option value="48">1961</option><option value="49">1960</option><option value="50">1959</option><option value="51">1958</option><option value="52">1957</option><option value="53">1956</option><option value="54">1955</option><option value="55">1954</option><option value="56">1953</option><option value="57">1952</option><option value="58">1951</option><option value="59">1950</option><option value="60">1949</option><option value="61">1948</option><option value="62">1947</option><option value="63">1946</option><option value="64">1945</option><option value="65">1944</option><option value="66">1943</option><option value="67">1942</option><option value="68">1941</option><option value="69">1940</option><option value="70">1939</option><option value="71">1938</option><option value="72">1937</option><option value="73">1936</option><option value="74">1935</option><option value="75">1934</option><option value="76">1933</option><option value="77">1932</option><option value="78">1931</option><option value="79">1930</option><option value="80">1929</option><option value="81">1928</option><option value="82">1927</option><option value="83">1926</option><option value="84">1925</option><option value="85">1924</option><option value="86">1923</option><option value="87">1922</option><option value="88">1921</option><option value="89">1920</option><option value="90">1919</option><option value="91">1918</option><option value="92">1917</option><option value="93">1916</option><option value="94">1915</option><option value="95">1914</option><option value="96">1913</option><option value="97">1912</option><option value="98">1911</option><option value="99">1910</option><option value="100">1909</option><option value="101">1908</option><option value="102">1907</option><option value="103">1906</option><option value="104">1905</option><option value="105">1904</option><option value="106">1903</option><option value="107">1902</option><option value="108">1901</option><option value="109">1900</option></select> <input type="hidden" name="search-type" value="simple" />
<input type="submit" id="simple-search-submit" name="submit" value="Search" />
</form>
Look like: http://img686.imageshack.us/img686/8994/95340998.gif (note the left most D.O.B. box should be on the left line)
Any ideas?
even in modern browsers forms a always renders slightly different, it also depends on the os you are using, i think inline-block would be a good idea fore the dropdowns.
Have you heard of jQuery UI Datepicker? Its very powerful and much more user and programmer friendly.
Insert a <br /> after the address-input. You can align the selects and the input with the attribute text-align: right;. The space between the individual elements can be set using margin: 5px; to apply a whitespace of 5px on top, left, bottom and right of each element.
Just put it together like this:
form {
text-align: right;
margin: 5px;
}
To give your "Location/Adress" Label the desired size you could create a css-class and apply it to the label.
Furthermore you should consider taking a closer look to basic css. You surely will need it some more times and it really is not hard to understand.
I always but my label inputs in p tags and then set the lable to display: block and float it left with a set width e.g.
<p><label></label><input type="text" name="thing" id="thing" value="" /></p>
label{
float: left;
display: block;
width: 100px;
}
input,select{
width: 200px;
}
For the dates I would do the same but add an id to the p like - id="dob" and then set up a special case for those inputs like:
#dob select{
width: 50px;
float: left;
}
This means you can then control the width of the selects within this tag failry easily.
Use a table. (Yes, I know this is not a "pure" solution, but it gets the job done in a fraction of the time of a CSS solution, and it has a much better chance of working in IE6 without a day of hacks).
Related
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I'm currently using following login form where I want to change the design a bit:
http://html-form-guide.com/php-form/php-login-form.html
I want to place ' Login ' into the middle of the box, instead the left:
I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.
Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.
Thanks in advance!
EDIT: Much prettier now. Thanks:
http://rapidhdd.com/images/4013242013-10-06_1842.png
Use this for the center text part:
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend align="center">Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
I guess you've changed the HTML code but note the: <legend align="center">Login</legend>
align="center"
http://jsfiddle.net/4szBC/
EDIT:
Since it seems like align is deprecated you, can do this using by using css.
legend {
text-align: center;
}
If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:
<script type="text/css">
legend {
text-align: center;
}
</script>
http://jsfiddle.net/4szBC/1/
add to submit button few CSS rules:
input[type=submit] {
display: inline-block;
margin: 0 auto;
padding: 10px 30px;
}
Given an html form like this:
<form action='/example/' id='example_form' method='POST' name='example_form'>
<fieldset>
<legend>Example form</legend>
<label for='age'>
Age
<input id='age' name='age' tabindex='1' type='text' />
</label>
<label for='gender'>
Gender
<select id='gender' name='gender' tabindex='2'>
<option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
<option id='gender_female' name='gender' value='female'>Female</option>
<option id='gender_male' name='gender' value='male'>Male</option>
</select>
</label>
<label for='height'>
Height
<input id='height' name='height' size='3' tabindex='3' type='text' />
</label>
<label for='weight'>
Weight
<input id='weight' name='weight' size='4' tabindex='4' type='text' />
</label>
<input id='Save' tabindex='5' type='submit' value='Save' />
</fieldset>
</form>
How would you style it to get the classic table based layout of label to the left, field to the right, everything aligned vertically? Tables are obviously out of the question. I can't find anything on how to do this with implicit labels and just CSS.
If the answer is to not wrap the fields then so be it, but I'd prefer if a solution could be found for this as:
This is generated html.
I keep reading about how using implicit labels improves accessibility.
Any help/pointers/insight will be much appreciated.
Here are some basic stylings to get started
example jsfiddle
fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}
Or, depending on what you mean by 'vertically aligned', you could try this.
label {
display: block;
position:relative;
margin: 0 0 5px 0;
}
label > input,
label > select {
position: absolute;
left: 70px;
width: 100px;
}
jsfiddle here
or an alternative here
CSS will never cease to amaze me. Based on the answer of #magicalex I came up with the following:
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
This manages to do most of what I had in mind, namely a horizontal layout with all the labels aligned to the right and all the fields aligned to the left, even if they were not the same width (which is unavoidable e.g. for iOS date pickers and the like).
However the JSFiddle illustrates the remaining problem of aligning a field if the label is broken into multiple lines (e.g. because of translations). But I guess this can be solved as well.
I have a form with a drop down list of venues and a submit button.
They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down.
I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround?
<form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform">
<select name="venue">
<option value="0" selected="selected">Select venue...</option>
<option value="1">venue 0</option>
<option value="2">club 1</option>
<option value="3">disco 2</option>
<option value="4">future test venue</option>
</select>
<input type="submit" name="" value="Show venue!" class="submitButton" />
</form>
css:
.searchform select {
max-width: 320px;
}
.searchform input.submitButton {
float: right;
}
If the venues are generated on the server side, you can use your server-side scripting to cut them down to a specific maximum character count.
When using pure CSS I'd also try setting overflow:hidden, both on the select and the option elements. Also try setting max-width on the option element. When it works in all non-IE, you can use the usual scripts to add max-width support for IE.
try:
fieldset select {
width: auto;
}
I have seen forms that can do this without using <br /> etc.
Here's my form:
<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
<label for="staff-login-email">Email</label>
<input type="text" id="staff-login-email" name="email" value="" />
<label for="staff-login-address">Password</label>
<input type="password" id="staff-login-password" name="password" value="" />
<input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>
And an example of what I'm taking about:
http://img694.imageshack.us/img694/4879/43201622.gif
All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?
using css, float your label to the left. Also, make your input elements blocks with a decent margin...
label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }
I've just guessed at a few numbers for the margins, so tweak as needed.
<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.
You can learn more about inline and block elements.