Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Craig Watson
Craig Watson
27,930 Points

multiple drop downs on one line inside a HTML form ??

Hi,

Just looking to expand my knowledge of HTML forms and one thing id like to know is how to have multiple drop down boxes across one line,

Im am coding a from for a friend and it would be much better to have the boxes for the "years from" and "years to" fields next to each other?

Also to possibly over complicate if for myself once that period of time is selected, should there be cause for another period of time how would I make that option available without loosing the original?

I appreciate this could be quite an in depth subject, maybe HTML Forms Extended Course Nick Pettit???

Please Thanks

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Craig,

I wrote this example to show how you would do what your asking but using a checkbox and text for speed.

alt text

Here is the html and css, the only really relevant css for you would be #second at the bottom. 

<form>
  <fieldset>
    <p>
      <input type="checkbox" id="first" name="fruit-1" value="cherry">
      <label for="first">I like cherry</label>
       <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
      <label for="second">I can't like banana</label>
    </p>

    <p>
      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
      <label for="third">I like strawberry</label>
    </p>
  </fieldset>
</form>

body {
  font: 1em sans-serif;
}

form {
  display: inline-block;

  padding: 0;
  margin : 0;
}

fieldset {
  border : 1px solid #CCC;
  border-radius: 5px;
  margin : 0;
  padding: 1em;
}

label {
  cursor : pointer;
}

p {
  margin : 0;
}

p+p {
  margin : .5em 0 0;
}

#second {
  margin: 0 0 0 100px;
}

Hope this helps.

Craig Watson
Craig Watson
27,930 Points

Thanks Wayne,

I will give it a go with drop down boxes and let you know how i get one ... fingers crossed !

Thanks Again