CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 1

CSS/HTML Form aligning text boxes

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>

Upvotes: 0

Views: 72

Answers (4)

Anthony
Anthony

Reputation: 1581

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>

Upvotes: 0

Venky
Venky

Reputation: 340

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!

Upvotes: 0

zoecarver
zoecarver

Reputation: 6403

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.

Upvotes: 0

Sishaar Rao
Sishaar Rao

Reputation: 370

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!

Upvotes: 1

Related Questions