How do I align text boxes next to each other in forms

Question

 <fieldset>
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">Please Enter your personal details</h3>
        <input id="finame" type="text" name="fname" placeholder="Firstname" />
        <input type="text" name="lname" placeholder="Lastname" />
        <div class="mof">
        <input type="radio" name="mof" value="Male" align="left">Male</input>
        <input type="radio" name="mof" value="Male" align="left">Male</input>
        </div>
        <input type="password" name="pass" placeholder="Password" />
        <input type="password" name="cpass" placeholder="Confirm Password" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

This is the output I am getting

https://i.stack.imgur.com/pPr7o.jpg

I would like to have the firstname and lastname next each other and also the radio buttons in series.

I would also like to add a '+' symbol which will add additional text fields dynamically to the form and make it scrollable.

`input[type=text], input[type=password]{display:inline-block}` — Vucko, Jan 17 '14 at 08:52
Not sure what you on about because it does it by default. [DEMO](http://jsfiddle.net/Ruddy/xmtKZ/) — Ruddy, Jan 17 '14 at 08:53
Do you need firstname,lastname and both radio button in a single line? All looks like a single line and near to each other. — JDGuide, Jan 17 '14 at 09:02
Yeah, firstname and last name in a single line. Radio buttons on the next single line. — user3205736, Jan 17 '14 at 09:09
Check your css: by default, your html looks like what you need: http://jsfiddle.net/P87Jt/2/ Width or display:block might be set to the inputs — Mihey Egoroff, Jan 17 '14 at 09:15
I had set the width to 100% for inputs. I changed it and it worked. Thanks a tonne :) — user3205736, Jan 17 '14 at 09:39

score 4 · Answer 1 · answered Jan 17 '14 at 08:53

4

You can use a CSS span class for that. Here is a tutorial.

http://html.net/tutorials/css/lesson8.php

Hope that is helpful in any way.

answered Jan 17 '14 at 08:53

patrick

881
2
9
32

score 3 · Accepted Answer · answered Jan 17 '14 at 09:11

3

place them in a table like this:

<table>
<tr>
<td><input id="finame" type="text" name="fname" placeholder="Firstname" /></td>le>
<td><input type="text" name="lname" placeholder="Lastname" /></td>
</tr>
</table>

answered Jan 17 '14 at 09:11

Mohammad Amin

64
4

Using tables is semantically incorrect. Using a display: table type of structure using CSS would be HIGHLY preferred here. You will run into a lot of problems in the future if you use . https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
– Kris Boyd Apr 30 '19 at 16:42

score 0 · Answer 3 · answered Jan 17 '14 at 09:18

0

The default behavior of input is inline, what you need to do is to set the width of both input elements to fit the width of the container

Here is your html in CodePen

answered Jan 17 '14 at 09:18

Shhade Slman

263
2
10

How do I align text boxes next to each other in forms

3 Answers3