70275

Creating form to have fields and text next to each other - what is the semantic way to do it?

Question:

I want to create a form so there is text on the left side and the inputs on the right, currently I am doing

<div id="labels"> <ul> <li>The Label</li> </ul> </div> <div id="inputs"> <ul> <li><input type="text /></li> </ul> </div>

And the CSS

input[type=text] { height: 14px; } #labels { float: left; } #inputs { float: right; } li { padding-top: 4px; padding-left: 10px; } // Text size is 14px

What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).

What would be the correct way to create this? I know a table would fix the problem but is that semantic?

Answer1:

This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.

But here is a simple form to get you started:

<strong>HTML</strong>

<form> <div class="line"> <label for="input">Full Name</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Company</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="nselect">Dropdown Menu</label> <div class="input"> <select name="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="line"> <label for="input">Text 1</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Text 2</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Text 3</label> <div class="input"> <input type="text" size="15" name="input"> </div> </div> </form>

<strong>CSS</strong>

form { margin:10px 0; } label { color: #404040; float: left; font-size: 13px; line-height: 18px; padding-top: 6px; text-align: right; width: 130px; } label, input, select, textarea { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-weight: normal; line-height: normal; } input, textarea, select { -moz-border-radius: 3px 3px 3px 3px; border: 1px solid #CCCCCC; color: #808080; display: inline-block; font-size: 13px; height: 18px; line-height: 18px; padding: 4px; width: 210px; } select { height: 27px; line-height: 27px; } form .input { margin-left: 150px; } form .line { margin-bottom: 18px; }

Here is a demo: <a href="http://jsfiddle.net/5aduZ/1/" rel="nofollow">http://jsfiddle.net/5aduZ/1/</a>

A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).

Answer2:

It makes sense for the label to be next to the input in the HTML - it's easier to read and more maintainable. Typical HTML for this would be:

<div class="fieldWrapper"> <label for="something">Something</label> <input type="text" id="something" name="something"> </div> <div class="fieldWrapper"> <label for="something">Something</label> <input type="text" id="something" name="something"> </div>

And CSS would be:

label, input { float:left; } input { font-size:14px; padding: 2px; // instead of using fixed height } label { width: 100px; // can use JavaScript if it needs to be dynamic padding-top: 3px; // to make the label vertically inline with the input element } .fieldWrapper { clear:left; }

Answer3:

If you really can't change your HTML, you could set a CSS height on the <li> tag to fix the alignment problem. But I <strong>strongly</strong> recommend you to choose one of other proposed solutions, because your HTML is very hard to read in its current state. And you should use the <label> tag.

Answer4:

Write this <input type="text" name="firstname" /> and set the height width and padding

Answer5:

At my company, way back when we first started our first web application back in 2001, we used a table.

<table class="formTable"> <tbody> <tr> <td><label>Name:</label></td> <td><input type="text" name="name" /></td> </tr> <tr> <td><label>E-mail:/label></td> <td><input type="text" name="email" /></td> </tr> </tbody> </table>

And while this works, philosophically I don't like the approach, because as far as I am concerned, a table should hold table-ized data.

You could use CSS and DIV's, as well:

<style> .formLabel, .formInput { display:inline-block; } </style> <div class="formField"> <div class="formLabel"><label>Name:</label></div> <div class="formInput"><input type="text" name="name" /></div> </div> <div class="formField"> <div class="formLabel"><label>E-Mail:</label></div> <div class="formInput"><input type="text" name="email" /></div> </div>

See here: <a href="http://jsfiddle.net/9P7pg/" rel="nofollow">http://jsfiddle.net/9P7pg/</a>

Or, you could avoid the use of div's all together, and just apply the display: inline-block for each label and input (or use classes). But then you will also have to remember to use a breaking space for carriage returns in between the label-field combination.

Answer6:

there is a special list for this actually! it's called definition list (dl) and is comprised of definition terms and definition definitions (dt/dd). i usually put the text in the dt and the input box in the dd. like this:

<form action="bla"> <dl> <dt>Name*</dt> <dd><input type="text" name="name" /> <dt>Email</dt> <dd><input type="text" name="email" /> </dl>

<input type="submit" />

</form>

Recommend

  • Django-tastypie pass request.user to custom save method
  • VBA Paste Value into new sheet below last row
  • Format a table that was added to a plot using pandas.DataFrame.plot
  • append to the same list with multiprocessing - python
  • data always null in onactivityresult facebook android sdk 3.0
  • jqgrid custom formatter button click event not working
  • java string index out of bound exception
  • How to detect beginning of line, or: “The name 'getCharPositionInLine' does not exist in t
  • ASP.Net MVC entity framework submit model, then open new model in edit page
  • How do I set context and followup event in one intent?
  • forever does not start on server reboot [duplicate]
  • How to enable LDAP extension in XAMPP environment
  • Faces Servlet not parsing .xhtml pages in jsf 2. running on tomcat 7
  • Logout user after Woocommerce Checkout
  • Get max bookings count in range
  • the IBM_JAVA error for running jobs in Hadoop 2.2.0
  • mssql script data insert or update
  • Calling a flash ExternalInterface in swiffyobject
  • Threads and Concurrent Modification Exception working with a list
  • can you use embedded ruby in custom javascript files in rails?
  • How to debug iBeacons and Passbook
  • Filtering out choiceless polls in the Django tutorial causes polls in the index to duplicate
  • How do you run a synchronous timer in C#?
  • Unsupported ciphersuite TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256
  • Android studio import problems. (Apktool)
  • Use AutoIt with java applications
  • VBScript InputBox and Help Files
  • How to select multiple items from a List view - JavaFX 8
  • Java Collections.shuffle() weird behaviour [closed]
  • Compiling multiple source files in Rcpp
  • What is the difference between dynamically creating a script tag and statically embed a script tag?
  • Regex not working in java 1.5
  • Can a PHP script be scheduled to run at a specific time or after a specific amount of time has expir
  • how to run ejabberd with Erlang on Heroku?
  • reshape/remould data frame to create normalized bar chart and pie chart
  • Using redis as an LRU cache for postgres
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • Bad automatic Triangulation with Mayavi for coloring a surface known only by its corner
  • calling IO Operations from thread in ruby c extension will cause ruby to hang
  • No OpKernel was registered to support Op 'Conv2D' with these attrs