CODEWITHSUNDEEP
htmlcssformspositioning
Juan Battini
Juan Battini

Reputation: 115

html form css positioning

I am trying to make an html form and I have to replicate the following image:

enter image description here

I've done almost everything right but I can't get the positioning just right, specially on the submit button. What is the best to do this? and also how do I reposition the "message" caption next to the text box?

<style type="text/css"> 
    form {
        background-color: gray;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 20px;
        width: 400px;
        text-align:right;
    }

    #formElements{
        width: 60%;
    }   
</style>


<body>
    <form>
        <div>
            Name: <input type="text" name="name" id="formElements">
            <p>
            Email: <input type="email" name="email" id="formElements">
            <p>
            Message: <textarea name="message" id="formElements"> </textarea>
            <p>
            <input type="submit" id="button" value="send your message">
        </div>
    </form>
</body>

Upvotes: 0

Views: 531

Answers (3)

Jroosterman
Jroosterman

Reputation: 418

I would almost put it in a two columns table with the text on the left and the text boxes and button on the right.

I should look like this

    <style type="text/css"> 
        form {
            background-color: gray;
            -moz-border-radius: 10px;
            border-radius: 10px;
            padding: 20px;
            width: 400px;
            text-align:right;
        }

        #formElements{
            width: 100%;
        }
        .right {
         text-align:right;
    }
        .wide {
        width:300px;
    }   
    </style>


    <body>
        <form>
            <div>
        <table>
        <tr>
                <td class="right">Name:</td>
 <td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
            </tr> <tr>
            <td class="right">Email:</td>
<td class="wide"> <input  class="wide" type="email" name="email" id="formElements"></td>
           </tr> <tr>   
         <td class="right">Message:</td>
<td class="wide"> <textarea   class="wide" name="message" id="formElements"> </textarea></td>
              </tr> <tr> 
        <td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
            </tr>
        </div>
        </form>
    </body>

Upvotes: 0

Nojan
Nojan

Reputation: 913

Take a look at this.

There are a few things you should consider in your code:

  • Do Not use an ID more than once in a page, it must be specific to 1 element. Use classes instead to style multiple elements at once.

  • Use label tag to explain the form elements

  • Don't forget to close a container tag like p after opening it.

Upvotes: 0

Liftoff
Liftoff

Reputation: 25372

A few problems here:

1. Broken HTML

You have several places where the HTML is broken. Remember to always close your <p> tags, and close the <input> tags with a soft closing /> just for good practice.

2. Never use IDs in place of class

IDs are only ever meant to be assigned to one element. They are to be unique. If you want to assign some CSS to multiple elements, use a class:

.class
//Not
#id

3. Use Labels for text in forms

Not only can you style them independently, but you can use the for attribute to link them to your inputs.

4. Repaired CSS

I used some different CSS tricks, such as block-style display for the button to allow me to position it in the right spot.

form {
    background-color: gray;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    text-align:right;
}
.formElements {
    width: 300px;
}
label {
    display: inline-block;
    vertical-align: top;
}
input[type="submit"] {
    display: block;
    margin-left: 95px;
}

5. Repaired HTML

Here it is. Always always always write proper HTML. It will save you a bunch of headaches.

<form>
    <div>
        <label>Name:</label>
        <input type="text" name="name" class="formElements" />
        <p>
            <label>Email:</label>
            <input type="email" name="email" class="formElements" />
        </p>
        <p>
            <label>Message:</label>
            <textarea name="message" class="formElements" rows="4"></textarea>
        </p>
        <p>
            <input type="submit" id="button" value="send your message" />
        </p>
    </div>
</form>

Here is a JSFiddle that demo's the form for you.

I hope this helps.

Upvotes: 1

Related Questions