How do I format <select> tags and <form> tags in HTML/CSS?

Question

This is my current layout

And I am trying to figure out how to have all of the information "inline" like the following

I've never worked with forms before so I have no idea how to format it, I tried googling but couldn't come up with any useful information because every example only had tag instead of multiple like my example

Answer 1

    <table>
    <tr>
    <td width="50%">First Name*</td>
    <td width="50%"><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >Last Name*</td>
    <td><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >Street Name*</td>
    <td ><input style="width:100%;"/></td>
    </tr>
      <tr>
    <td >City</td>
    <td ><input style="width:75%;"/></td>
    </tr>
    <tr>
    <td >State</td>
    <td ><input style="width:50%;"/></td>
    </tr>
      <tr>
    <td >Zip</td>
    <td ><input style="width:65%;"/></td>
    </tr>
      <tr>
    <td >Phone</td>
    <td ><input style="width:70%;"/></td>
    </tr>

    </table>
    
    
    <table>
    
        <tr>
    <td width="50%">Processor Speed</td>
    <td width="50%"><select style="width:100%"><option></option><option>2.4GHz</option></select></td>
    </tr>
      <tr>
    <td >Memory</td>
    <td><select style="width:100%"><option></option><option>1GB</option></select></td>
    </tr>
      <tr>
    <td >Monitor size</td>
    <td ><select style="width:100%"><option></option><option>15"</option></select></td>
    </tr>
      <tr>
    <td >Hard Drive</td>
    <td ><select style="width:100%"><option></option><option>240GB</option></select></td>
    </tr>
    <tr>
    <td >Dvd Burner</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td >LAN Card</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>    <tr>
    <td >Media Card Reader</td>
    <td>
    <table style="width:100%;height:100%;">
    <tr>
    <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">yes</td>
   <td align="right" width="20%"><input type="checkbox" style="width:75%"/></td>
    <td align="left" width="30%">NO</td>
    </tr>
    </table>
    </td>
    </tr>
    
       
    
    
    </table>

<table>
<tr>
<td width="50%">First Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">Last Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">Street Name*</td>
<td width="50%"><input style="width:100%;"/></td>
</tr>
  <tr>
<td width="50%">City</td>
<td width="50%"><input style="width:75%;"/></td>
</tr>
<tr>
<td width="50%">State</td>
<td width="50%"><input style="width:50%;"/></td>
</tr>
  <tr>
<td width="50%">Zip</td>
<td width="50%"><input style="width:65%;"/></td>
</tr>
  <tr>
<td width="50%">Phone</td>
<td width="50%"><input style="width:70%;"/></td>
</tr>

</table>

Answer 2

An option using flexbox, but it may not be too compatible with older versions of IE (people looking for new computers)

With this option you will want to wrap your input titles (name, city, etc.) with a div.

form {
  box-sizing : border-box;
  margin: 0px; padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  box-sizing : border-box; /* allows calculating size percentages without border and padding interfering */
  background-color: green;
}

li {
  display: flex;
  box-sizing : border-box;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 5px;
  background-color: red;
}

li div {
  display: flex;
  justify-content: flex-start;
  flex-grow: 1;
  width: 40%;
}
li div::after { /* a pseudo element for a spacer */ 
  content: "";
  display: flex;
  flex-grow: 1;
  background-color: blue;
}

input {
  display: flex;
  max-width: 50%;
  margin: 0px;
}

fiddle

https://jsfiddle.net/Hastig/48nLnqop/3/

may want to remove the background colours from the example, unless you're having an early christmas special.

Answer 3

#contact-wrap{}

#contact-wrap { border: 1px solid black; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; border-spacing: 0px;}
#contact-wrap, #contact-wrap th, #contact-wrap td { border-collapse: collapse;  vertical-align:top;}
#contact-wrap td, #contact-wrap th { text-align: left; padding: 0px; }
#contact-wrap input[type="text"] { width: 100%; height: 20px; line-height: 20px; }

<table id="contact-wrap">
    <colgroup>
    	<col style="width:50%">
    	<col style="width:50%">
    </colgroup>
    <tr>
        <td>
        	<h4>Contact Information</h4>
        	<table id="contact-info">
                <colgroup>
                    <col style="width:40%">
                    <col style="width:60%">
                </colgroup>
                <tr>
                    <td>First Name: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>Last Name: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>Street: *</td>
                    <td><input type="text" placeholder="" /></td>
                </tr>
                <tr>
                    <td>City: *</td>
                    <td><input type="text" placeholder="" style="width:70%" /></td>
                </tr>
                <tr>
                    <td>State: *</td>
                    <td><input type="text" placeholder="" style="width:60%" /></td>
                </tr>
                <tr>
                    <td>Zip: *</td>
                    <td><input type="text" placeholder="" style="width:55%" /></td>
                </tr>
                <tr>
                    <td>Phone: *</td>
                    <td><input type="text" placeholder="" style="width:70%" /></td>
                </tr>
            </table>
        </td>
        <td>
        	<h4>Computer Cofiguration</h4>
        	<table id="config-info">
                <colgroup>
                	<col style="width:50%">
                	<col style="width:50%">
                </colgroup>
                <tr>
                    <td>Processor Speed: *</td>
                    <td>
                    	<select>
                        	<option>3.2 GH</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Memory: *</td>
                    <td>
                    	<select>
                        	<option>1 GB</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Monitor Size: *</td>
                    <td>
                    	<select>
                        	<option>16"</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Hard Drive: *</td>
                    <td>
                    	<select>
                        	<option>240 GB</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>DVD Burner: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
                <tr>
                    <td>LAN Card: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
                <tr>
                    <td>Media Card Reader: *</td>
                    <td>
                    	<input type="radio" name="yes">
                        <label for="yes">Yes</label>
                        <input type="radio" name="no">
                        <label for="yes">No</label>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The code is here.

#contact-info { border: 1px solid black; font-family: arial, sans-serif; border-collapse: collapse; width: 100%; border-spacing: 0px; }

#contact-info, #contact-info th, #contact-info td { border-collapse: collapse;}
#contact-info td, #contact-info th { text-align: left; padding: 8px;}
#contact-info input{ width:70%; height:20px; line-height:20px;}

<table id="contact-info">
<colgroup>
    <col style="width:40%">
    <col style="width:60%">
  </colgroup>
  <tr>
    <td>First Name: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>Last Name: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>Street: *</td>
    <td><input type="text" placeholder="" /></td>
  </tr>
  <tr>
    <td>City: *</td>
    <td><input type="text" placeholder="" style="width:30%" /></td>
  </tr>
  <tr>
    <td>State: *</td>
    <td><input type="text" placeholder="" style="width:20%" /></td>
  </tr>
  <tr>
    <td>Zip: *</td>
    <td><input type="text" placeholder="" style="width:25%" /></td>
  </tr>
  <tr>
    <td>Phone: *</td>
    <td><input type="text" placeholder="" style="width:30%" /></td>
  </tr>
</table>

Answer 4

table th {
  text-align: left;
}

<table style="width:100%">
  <tr>
    <th width="50%" align="left">Firstname</th>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>
      <input type="text">
    </td>
  </tr>
</table>

you can use <table> format in HTML Look w3schools basic tutorial for further detailed information.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td><input...></td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td><input...></td>
  </tr>     
</table> 

Answer 5

you can layout in table

<table  border="0" cellspacing="20">
 <tr >
  <td >Processor Speed</td>
  <td><select><option>2.4GHz</option></select></td>
 </tr>
 <tr >
  <td >Memory</td>
  <td><select><option>1 GB</option></select></td>
 </tr>
</table>

Answer 6

Or you can try to put everything in a table, like this:

td {
  width: 200px;
}

<form>
  <table>
    <tr>
      <td>
        <lable>First Name</lable>
      </td>
      <td>
        <input>
      </td>
    </tr>
    <tr>
      <td>
        <lable>Last Name</lable>
      </td>
      <td>
        <input>
      </td>
    </tr>
  </table>
</form>

Answer 7

You can use without table like this.

li label {
    float: left;
    width: 100px;
    margin-right: 10px;
    font-size: 14px;
}

li {
    list-style: none;
    margin-bottom: 5px;
}

<ul>
<li><label for="name">First Name:</label></li>
<li><input type="text" name="name" placeholder="Name">
</ul>

Answer 8

First of all add tag to your text. Then give your labels and select a fixed width, you might also need to set them with display:inline-block:

label{
width: 150px;
display:inline-block
}
select {
width:100px;
display:inline-block
}

Here is a modification with the first column of fields: jsfiddle