CSS/HTML Form aligning text boxes

Question

I am new to the site.

I have an issue in CSS and HTML to alight the text boxes in the same row. Meaning that currently, they are not aligned. Could you please help and explain?

<!DOCTYPE html>

<html>
<style>
.input1:focus {
background-color: yellow;
}
.input1:hover {
background-color: cyan;
}
</style>

<body>
<form>
First name: <input class="input1" type="text" name="firstname"><br>
Last name: <input class="input1" type="text" name="lastname"><br>
E-mail Address: <input class="input1" name = "email" placeholder =     "[email protected]">

<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>

</form>

</body>
</html>

Possible duplicate of Align form elements in css

languitar
– languitar

2017-02-16 17:14:32 +00:00
Commented Feb 16, 2017 at 17:14 — languitar
– languitar, Commented Feb 16, 2017 at 17:14

Sishaar Rao · Accepted Answer · 2017-02-16 16:22:57Z

1

The textboxes are not aligned because you have text before each one. I would suggest using a table, and then use CSS to make sure there's no row/column outline

<form>
<table>
<tr><td>First name:</td> <td><input class="input1" type="text" name="firstname"></td></tr>
<tr><td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td></tr>
<tr><td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =     "[email protected]"></td></tr>

<tr>
<td><input type = "submit" value = "Submit Form"></td>
<td><input type = "reset" value = "Reset button"></td>
</tr>
</table>    
</form>

Refer to https://www.w3schools.com/html/html_tables.asp for more help!

answered Feb 16, 2017 at 16:22

Sishaar Rao

3801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zoecarver · Accepted Answer · 2017-02-16 16:28:04Z

0

You can use float: left; and float: right;. Here is a good resource https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old.

edited Feb 16, 2017 at 16:28

answered Feb 16, 2017 at 16:21

zoecarver

6,5732 gold badges29 silver badges56 bronze badges

Comments

Venky · Accepted Answer · 2017-02-16 16:42:05Z

0

HTML

<form>
<table><tr>
<td>First name:</td> <td><input class="input1" type="text" name="firstname"></td>
<td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td>
<td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder =     "[email protected]"></td></tr>

</table>
<div class="makeCenter">
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</form>

CSS

.makeCenter{
  text-align:center;
  width:100%;
  padding:20px 0 0  0;
}
input[type=submit]{
  margin-right:20px;
}

According to my guess, you must be expecting this!

answered Feb 16, 2017 at 16:42

Venky

3403 silver badges15 bronze badges

Comments

Anthony · Accepted Answer · 2017-02-16 16:50:36Z

Wrap your labels in divs. Add a class attribute to each div with the same classname, add the following style to that class:

display: inline-block; (this displays the labels on the same line as the input elements)
add width whatever you want it to be. In my example I made it 120px

.input1:focus {
  background-color: yellow;
}
.input1:hover {
  background-color: cyan;
}
.label {
  display: inline-block;
  width: 120px;
}

<form>
<div class="label">First name:</div> <input class="input1" type="text" name="firstname"><br>
<div class="label">Last name:</div> <input class="input1" type="text" name="lastname"><br>
<div class="label">E-mail Address:</div> <input class="input1" name = "email" placeholder =     "[email protected]">

<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>

</form>

Collectives™ on Stack Overflow

CSS/HTML Form aligning text boxes

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related