CODEWITHSUNDEEP
formsinputlabelhtml
NeoFox1972
NeoFox1972

Reputation: 25

How do I make a HTML form using <label> <input> and <span>?

I have made a form in HTML using a table and that worked fine, however, my teacher told me that making forms from tables is not the proper way to do it anymore, instead I should use:

<form>
 <label></label>
 <input>
</form>

but he also mentioned something about using <span></span> and I'll guess it is just about this point where I got a bit confused, because where should I use it - ie. should I put the <label> and the <input> in between <span></span> ?

A few of the reason I ask is:

  1. I don't consider myself very savvy when it comes to HTML
  2. I would just have used a <div></div> to wrap around the <label> and the <input> and then use css to put it where I want it to appear on the webpage.

Regarding the form I want to create then I want it to look like this:

[Firstname] [lastname]
[textfield] [textfield]
[Street]    [zip-code]  [city]
[textfield] [textfield] [textfield]
[E-mail]    [Phone]
[textfield] [textfield]
[message]
[textarea]

I hope the layout of my form makes sense to the majority of you !

Upvotes: 2

Views: 6204

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

You teacher probably means that you should wrap each pair of input and label in a span. You are quite right in thinking that you should use div instead of span there. Just tell your teacher to look at the page when style sheets are disabled. On similar grounds, you should prove her/him that he is all wrong about saying that a table should not be used.

To do the exercise of writing a form (that is essentially tabular data) without using table markup, just use your div approach and use tabular layout features of CSS: set display: table on the form, display: table-row on the div elements, and display: table-cell on the input and label elements. Add padding and horizontal alignment as needed. Do not forget to inform your teacher that this will only work on sufficiently modern browsers, whereas the logical approach of using an HTML table works on all browsers.

Upvotes: 0

Ricky S
Ricky S

Reputation: 371

Although you could use SPAN technically.. as it's an inline element and so are LABEL and INPUT, it doesn't quite sit well. Inline elements aren't really designed to be containers, so using a block level element such as a DIV would be a better way of structuring it.

Beyond this to make it line up, you're moving into the relms of CSS to float your elements.

So something alone the lines of:

<form action="">
    <fieldset>
        <div class="left">
            <label for="FirstName">First Name</label>
            <input type="text" name="FirstName" id="FirstName">
        </div>
        <div class="right">
            <label for="LastName">Last Name</label>
            <input type="text" name="LastName" id="LastName">
        </div>
    </fieldset>
</form>

<style type="text/css">

fieldset {
    width:500px;
    overflow:hidden;
}

fieldset .left {
    float:left;
    width:50%;
}
fieldset .right {
    float:right;
    width:50%;
}
fieldset label {
    display:block;
}
fieldset block {
    display:block;
}
</style>

Upvotes: 0

lmno
lmno

Reputation: 1044

Try something like this:

<form action="action.php">
  <label for="firstName">First Name</label>
  <input type="text" name="fname" id="firstName"><br>

  <label for="lastName">First Name</label>
  <input type="text" name="lname" id="lastName"><br>
  ....
</form>

and to line it all up you could use some css like this:

label{
      width: 100px;
      text-align:left;
}

Upvotes: 2

Related Questions