HTML / CSS表单与按钮和文本区域对齐

Question

I'm trying to achieve the following layout but I'm having trouble doing it in HTML and I am not sure what the correct way to implement this would usually be (I would assume CSS to be the case but maybe doing it in plain HTML is better/simpler) :

[-NameInput-] |-----------------------------------textarea-----------------------------------]
[-PhoneInput-] |-----------------------------------textarea-----------------------------------]
[Submit]
[-EmailInput- ] |-----------------------------------textarea-----------------------------------]

Where the [ ] brackets represent a button and the | | represent one text area. So far I'm kinda confused as some websites are doing this kind of stuff with the table tag, and other with block-align in CSS. Any input on this?

Answer 1

To start with, if you are seeing source code where tables are used to lay out page elements, leave that site immediately. Do not go back. It is a prehistoric dinosaur and on the verge of extinction. You wouldn't want to go extinct with it.

Secondly, using CSS to lay out a form is quite easy and mobile-friendly as well.

<form>
<div class="input-wrapper">
    <label for="name">Name:</label>
    <input id="name" type="text" placeholder="Name">
</div>
<div class="input-wrapper">
    <label for="phone">Phone:</label>
    <input id="phone" type="text" placeholder="Phone">
</div>
<div class="input-wrapper">
    <label for="email">Email:</label>
    <input id="email" type="email" placeholder="Email Address">
</div>

.input-wrapper {
    width:100%;
    clear:both;
    padding:1em 0;
}
label {
    display:inline-block;
    float:left;
    text-align:right;
    margin-right:1em;
}
input {
    display:block;
    float:left;
}

Here is a basic fiddle. https://jsfiddle.net/maguijo/j571a7j0/

This form is aligned on wider screens and go to stacked on smaller screens. Boom. Done.