SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Oct 22, 2009, 11:27 #1
- Join Date
- Aug 2008
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A better way to display form fields
Please view the attachment and let me know if you know of a way to display these form fields better. In other words, so that the display area or display box is smaller while at the same time, users are still able to make multiple selections.
Thanks, matt
-
Oct 22, 2009, 14:23 #2
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
You should have posted this question in the CSS forum since CSS is how you change the appearance. Perhaps a moderator will move it for you.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Oct 22, 2009, 17:13 #3
- Join Date
- Aug 2008
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 23, 2009, 09:58 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
You can size it with CSS but that's about as much as you can do cross browser as the select element has limited styling capabilities.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #select { width:200px; height:125px; background:#dddccc; border:1px solid #000; font-size:12px; } #select option { padding:2px 5px;/* wont work in most browsers*/ } </style> </head> <body> <form id="form1" method="post" action=""> <div> <label for="select"></label> <select name="select" multiple="multiple" id="select"> <option value="a1">Item 1</option> <option value="a2">Item 2 </option> <option value="a3">Item 3 </option> <option value="a4">Item 4 </option> <option value="a5">Item 5 </option> <option value="a6">Item 6 </option> <option value="a7">Item 7 </option> <option value="a8">Item 8 </option> <option value="a9">Item 9 </option> <option value="a10">Item 10 </option> </select> </div> </form> </body> </html>
-
Oct 23, 2009, 18:34 #5
- Join Date
- Jan 2009
- Location
- Dallas
- Posts
- 990
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The select element also has the size attribute, which sets the number of options to show. The rest are scrolled. Stealing Paul's example,
Code:<form id="form1" method="post" action=""> <fieldset> <label for="select"></label> <select name="select" multiple="multiple" id="select" size= "4"> <option value="a1">Item 1 </option> <option value="a2">Item 2 </option> <option value="a3">Item 3 </option> <option value="a4">Item 4 </option> <option value="a5">Item 5 </option> <option value="a6">Item 6 </option> <option value="a7">Item 7 </option> <option value="a8">Item 8 </option> <option value="a9">Item 9 </option> <option value="a10">Item 10 </option> </select> </fieldset> </form>
garyAnyone can build a usable website. It takes a graphic
designer to make it slow, confusing, and painful to use.
Simple minded html & css demos and tutorials
-
Oct 23, 2009, 22:46 #6
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
That's a useful tip, Gary. I tried it with Paul's example, and noticed that the size attribute only worked if the CSS height setting was removed. (A no-brainer, I guess, but perhaps still worth pointing out... for no-brainers like me.)
-
Oct 23, 2009, 22:53 #7
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
Since no one has mentioned it, a select list like this will just be "one line tall" (so to speak), and the options will only appear when the user clicks on the list, if the select setting is changed from something like:
Code:<select name="select" id="select" size="4" multiple="multiple">
Code:<select name="select" id="select">
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #select { width:200px; background:#dddccc; border:1px solid #000; font-size:12px; } #select option { padding:2px 5px;/* won't work in most browsers*/ } </style> </head> <body> <form id="form1" method="post" action=""> <div> <label for="select"></label> <select name="select" id="select"> <option value="a1">Item 1</option> <option value="a2">Item 2 </option> <option value="a3">Item 3 </option> <option value="a4">Item 4 </option> <option value="a5">Item 5 </option> <option value="a6">Item 6 </option> <option value="a7">Item 7 </option> <option value="a8">Item 8 </option> <option value="a9">Item 9 </option> <option value="a10">Item 10 </option> </select> </div> </form> </body> </html>
-
Oct 25, 2009, 19:51 #8
- Join Date
- Aug 2008
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks to all who chimed in with great tips. Matt
-
Oct 28, 2009, 06:23 #9
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
There's a problem setting a size or a CSS width on these dropdown selects...
in some browsers (notably IE) the width really will stay that width. Not only of the select itself but also the part that drops down. If your width is less than the longest item, the longest item gets cut off. You can't read it.
In FF and other browsers the drop-down box will be wide enough.
In a page where I needed to really limit the width of the dropdowns, but had very long names inside (country names), I ended up adding a title to the longest ones. This isn't really the best solution but it worked for the browsers who were hiding the text. Still doesn't help keyboarders though.
(in case the OP was also referring to width and not just height)
-
Oct 28, 2009, 17:57 #10
- Join Date
- Aug 2008
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
First, thanks everyone for the CSS tip provided above. It works great on my form menu.
I have another requests regarding the form.
1. Does anyone know how to control the tab function between the form elements?
-
Oct 28, 2009, 19:33 #11
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 Thread(s)
I'm not sure you can do this on all form elements, but you can add tabindex="1" etc. on inputs:
e.g.
Code:<input id="email" type="text" tabindex="1" value="" name="email"/>
EDIT:
As always, it's useful to search the excellent SitePoint Reference on this. Here's a useful page: http://reference.sitepoint.com/html/select/tabindex
-
Oct 29, 2009, 02:56 #12
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Be really careful with those. You may end up forcing someones first tab on the whole page to the form. Tabindex isn't locally scoped : )
Normally you can set the form questions in the desired, logical order and change placement with CSS, which means tab order naturally follows correctly.
Bookmarks