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 = "name#domain.com">
<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>
</form>
</body>
</html>
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 = "name#domain.com"></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!
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.
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 = "name#domain.com"></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!
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 = "name#domain.com">
<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>
</form>
Related
Is there any way can I show the Input Number and Checkbox inside the same td element of the table and same line ? . When I am trying to show , The input element skip to next line.
Checkbox should be shown just left side of the Input but in same line of the TD column Here is the code given below
EmpModel
EmpName string
IsSlarySuccess boolean
Salary decimal(5,2)
IsBonusSuccess boolean
Bonus decimal(5,2)
#model List<EmpModel>
<table>
<thead>
<tr>
<td>Name</td>
<td>Salary</td>
<td>Bonus</td>
</tr>
</thead>
<tbody>
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].EmpName</td>
<td><input type="number" placeholder="0.00" style="text-align:center;vertical-align:central" asp-for="#Model[i].Salary" class="form-control format-text" />
<span style="float:left"><input type="checkbox" #(Model.[i].IsSlarySuccess ? "checked" : "") /></span>
<td><input type="number" placeholder="0.00" style="text-align:center;vertical-align:central" asp-for="#Model[i].Bonus" class="form-control format-text" />
<span style="float:left"><input type="checkbox" #(Model.[i].IsBonusSuccess ? "checked" : "") /></span>
</tr>
}
</tbody>
</table>
.form-inline class can display a series of labels, form controls, and buttons on a single
horizontal row.
So you can add the input and span in a new div which class is form-inline and put the
element in the order you want, like:
<tr>
<td>EmpName</td>
<td>
<div class="form-inline">
<span><input type="checkbox" /></span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central" class="form-control format-text" />
</div>
</td>
<td>
<div class="form-inline">
<span><input type="checkbox" /></span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central" class="form-control format-text" />
</div>
</td>
</tr>
Edit:
If you have more td, you can write a css like this :
<style>
#showinline {
display: flex;
align-items: center;
}
</style>
<table>
//....
<td>
<div id="showinline"> //use that css here
<span><input type="checkbox" /></span>
<input type="number" placeholder="0.00" style="text-align:center;vertical-align:central" class="form-control format-text" />
</div>
</td>
//............more
Result:
In my form, I have multiple label and inputs. I want to change the text color of the particular label in input next to it is focused.
My form html code is below:
<div class="form">
<label class="label">Basic Details<br>
<table class="form-table">
<tr>
<td><label class="form-label">Name:</label></td>
<td><input type="text" name="name" placeholder="Name" required></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="email" name="email" placeholder="Email" required></td>
</tr>
<tr>
<td><label>Phone number:</label></td>
<td><input type="phone" name="phone" placeholder="Phone number"required></td>
</tr>
</table>
</div>
I want to change the color of Name label when I focus on the name input next to it.
We can make use of + selector and change the order of elements in the html and revers it back through css using the order property which is part of flexbox.
[table] {
display: table;
}
[row] {
display: flex;
}
input {
margin-left: auto;
order: 2;
}
[row]>input:focus+label {
color: red;
}
<div class="form">
<div table>
<div row>
<input type="text" name="name" placeholder="Name" required>
<label class="form-label">Name:</label>
</div>
<div row>
<input type="email" name="email" placeholder="Email" required>
<label>Email:</label>
</div>
<div row>
<input type="phone" name="phone" placeholder="Phone number" required>
<label>Phone number:</label>
</div>
</div>
</div>
I want to align the input fields shown below, with keep using <label> in a correct way.
The code is as below:
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
I am thinking to separate <label> tags in a <div> and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?
How about this
form > label {
min-width: 185px;
display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
<style>
form{
width: 300px;
float: left;
}
form > label{
width: 50%;
float: left;
margin-bottom: 10px;
}
form > input{
float: right;
width: 50%;
margin-bottom: 10px;
}
</style>
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
For simple UI use this (Using Table):
<form action="add.php" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td>
<label for="refNo">Field1 name (long)</label>
</td>
<td>
<input id="refNo" type="text" name="refNo" value="" />
</td>
</tr>
<tr>
<td>
<label for="name">Field2 name</label>
</td>
<td>
<input id="name" type="text" name="name" value="" /><br>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value=":: Add ::" name="addBtn" />
</td>
</tr>
</table>
</form>
For More good looking and advanced UI try using Bootstrap.
I was trying to make a form with a username, password and an email. But for some reason the input text or the box for email isn't aligned with the boxes for the username and the password. I was wondering if there's a way to make them all align each other.
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
It's just for the sake of making everything look nice and pretty.
Oh man... Tables?? HTML from '90s incoming!
<style>
label {
width: 80px;
display: inline-block;
}
</style>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
I went for a different approach than a table, since if your are going to table up your form, I suggest you use a solid css framework, which is simply better.
This is the approach of CSS only A Cool Fiddle
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
input[type="submit"]{
margin: 4% 40%;
}
With all that said, I also suggest you change the old way of forms being written with label values to placeholder.
for more reference Placeholders are cool!
<form>
<table>
<tr> <td> <label for="username">Username</label> </td> <td> <input type="text" id="username" name="username" maxlength="30"> </td> </tr>
<tr> <td> <label for="password">Password</label> </td> <td> <input type="password" id="password" name="password"></td> </tr>
<tr> <td> <label for="email">Email</label> </td> <td><input type="email" id="email" name="email" maxlength="30"></td> </tr>
<tr> <td></td> <td> <input type="submit" value="Register"> </td> </tr>
</table>
</form>
should work, just surroundet it with a table.
<table>
<form>
<tr>
<td> <label for="username">Username</label></td>
<td> <input type="text" id="username" name="username" maxlength="30"> </td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" maxlength="30"></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</form>
</table>
It is always a good practice to make any form in either a Table or in a Div.
I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png
You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.
Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>
I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.