I want to vertically align all the input boxes in a particular is div
my code is in
http://jsfiddle.net/eSPMr/72/
<div id="editpart3">
<div id ="address1">
<p><b>Residential Address:</b></p>
<p> Line1 : <input type="text" value="#Model.Mem_ResAdd1" name="Mem_ResAdd1" /></p>
<p> Line2 : <input type="text" value="#Model.Mem_ResAdd2" name="Mem_ResAdd2" /></p>
<p> Line3 : <input type="text" value="#Model.Mem_ResAdd3" name="Mem_ResAdd3" /></p>
<p> Line4 : <input type="text" value="#Model.Mem_ResAdd4" name="Mem_ResAdd4" /></p>
<p>PIN Code : <input type="text" value="#Model.Mem_ResPin" name="Mem_ResPin" /></p>
<p><b>Res Phone: </b> <input type="text" value="#Model.Mem_ResPh" name="Mem_ResPh" /></p>
</div>
/div>
#editpart3 {
margin-top:10px;
border:.5px solid #bbb;
min-height:250px;
height:auto;
width:100%;
border-radius:5px;
#editpart3 input[type="text"] {
width:50%;
margin-left:5%;
}
#address1 {
float:left;
width:40%;
margin-left:4%;
height:auto;
}
#address2 {
float:left;
margin-left:9%;
height:auto;
width:40%;
}
#address1 p,#address2 p{
padding-top:10px;
}
i am tried to put margin left but affect all the input box. Is this only possible, when i take that particular input boxes seperatly ?
For a good format for form, I prefer to use tabular structure like this
Check this JSFiddle
Although I am against using tables for anything other than tabular data, in this case they can be extremely useful and effective for aligning form input elements:
<div id ="address1">
<p><b>Residential Address:</b></p>
<table border = "0">
<tr>
<td><p> Line1 : </td><td><input type="text" value="#Model.Mem_ResAdd1" name="Mem_ResAdd1" /></td></p></tr>
</div>
Continue the table for your other input elements.
Related
.box{
margin: 0 auto;
width:400px //you can set it in %.
height: 600px;
padding:20px;
background:#f9f9f9;
border:4px solid #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
</head>
<body>
<center>
<div class="box">
<img src="1.png" align="right">
<h1>Form Updation</h1>
<form name="first" method="get" action="https://www.mi.com/in/">
First name : <input type="text" name="fname" size="15" maxlength="25"><br><br>
Last name : <input type="text" name="Lname" size="15" maxlength="25"><br><br>
Password : <input type="password" name="Password" size="10" maxlength="15"><br><br>
Nationalaity : <input type="text" name="Country" size="15" maxlength="25"><br><br>
Phone Number : <input type="text" name="Phone" size="15" maxlength="25"><br><br>
</form>
</div>
</center>
</body>
</html>
output -
[Phone number is not in proper arrangemnt with the above one i need to come with phone number in arrangement like all in centre and onething is that i want these 5 should come up with by another eans there is some space which is left out in other work all the fillup section must come with space index.]
It's hard to get what you want but i guess your question is how can I align texts and inputs in a nice order.
So we can think a way to do that in your code.
Firstly think your text and input parts as an one. We can take the text in a div and give that a width like 50% or 33%. After that we can define another div for input and give it the remaining width or directly give the remaining width to input.
Up to now
*{
box-sizing:border-box;
}
#form{
width:50%
}
#form div,
#form input{
display:inline-block;
}
#form div{
width:35%;
}
#form input{
width:65%;
}
<form id="form" name="first" method="get" action="https://www.mi.com/in/">
<div>First name : </div><input type="text" name="fname" size="15" maxlength="25"><br><br>
<div>Last name : </div><input type="text" name="Lname" size="15" maxlength="25"><br><br>
<div>Password : </div><input type="password" name="Password" size="10" maxlength="15"><br><br>
<div>Nationalaity : </div><input type="text" name="Country" size="15" maxlength="25"><br><br>
<div>Phone Number : </div><input type="text" name="Phone" size="15" maxlength="25"><br><br>
</form>
But don't forget to make your components box-sizing to border-box. If you don't when you give to 33% and 66% width or anything that sums 100% won't work as side by side. Your input will get new line.So we give our form a width that we want, after that we made our input and div inline-block to get side by side nad then give the widths. If you want to center your text you can add text-align:left to your divs.
#form div{
width:35%;
text-align:left;
}
#form represent our form with it's id that we gave, #form div represent the divs that inside that form( you can check combinators) and so on. Here is a link for combinators either.
Combinators in CSS
i had a look at some examples here and followed one, but it is not wokting. what am i missing please?
fieldset {
overflow:hidden;
width:90%
}
label {
padding-left:26px;
width:250px;
display:block; float:left; clear:left;
}
input {
width:200px;
display:block; float:left;
}
.formFieldDiv { float:left; width:500px }
<td style="width:70%" align="left" valign="top">
<form id="divorce" name="divorce" method="post" action="send_form_email.php">
<fieldset>
<div id="spouse1" class="formFieldDiv" >
<label for="spouse1">Full Names + Surname Spouse 1*</label>
<input type="text" name="spouse1" id="spouse1" maxlength="50" size="30" />
</div>
<div id="spouse2" class="formFieldDiv">
<label for="spouse2">Full Names</label>
<input type="text" name="spouse2" id="spouse2" maxlength="50" size="30"/>
</div>
</fieldset>
</form>
</td>
what am i missing? I want to get the input's all in line
formFieldDiv is a class so use . before it in css ie-
.formFieldDiv { float:left; width:500px } instead of
formFieldDiv { float:left; width:500px }
Add
display:inline-block;
to your label
<div id="spouse1" class="formFieldDiv" >
<label for="spouse1">address</label>
<input type="text" name="spouse1" id="address" maxlength="50" size="30" />
</div>>
change </div>> to </div>
And i need to look your send_form_email.php file
I am trying to align to input text boxes of a form side by side but i not able to do so. Please help.
Fiddle: here
HTML:
<p>Your Name
<br>
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
</span>
</p>
<p>Your Email
<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7- validates-as-email" aria-required="true">
</span>
</p>
CSS:
.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
http://jsfiddle.net/rHh3w/12/show
Just need to set your p element to "display:inline;" by default they are block elements and will not align next to each other.
also deleted two br tags
p {display:inline;}
How about display them like a table.
.myForm {
width:100%;
display:table;
}
.myForm div {
margin:0;
padding:0;
display:table-cell;
}
.myForm div:last-of-type{
text-align:right;
}
.myForm div:last-of-type Align text to the right side.
Check it on http://jsfiddle.net/463QF/
Remove <br /> from your HTML markup.
Write:
p{
display:inline-block;
width:50%;
}
.wpcf7-form-control-wrap input[type="text"],.wpcf7-form-control-wrap input[type="email"] {
background-color: #fff;
color: #000;
width: 50%;
}
Note:
inline-block leaves white space between elements. Write elements on same line to avoid it.
Like write
</p><p>
(on same line)
rather than
</p>
<p>
(on different lines)
Fiddle.
Try this
What I have done is added the following:
p {
float: left;
}
That's all you need to do, it also means that if your container width goes below the fixed width of the two input boxes together, they will float down over two lines rather than breaking and spilling out of their container.
While you're at it, it might be worth changing the text labels to actual labels, this will allow the user to click on the label and still highlight the form, which is growing increasingly important due to the rise in mobile use.
Also, you missed a closing > of your first input box.
Try below CSS for p tag
p
{
width:auto;
float:left;
margin-right:10px;
}
If you need some space between text box then u can set margin-right to the same.
Just add this to your CSS code : p{width:40%;border:1px solid #000;float:left}
Fiddle :http://jsfiddle.net/logintomyk/PSQ7u/
HTML example:
<div class="myForm">
<div>
<label for="name">Your name</label>
<input name="name" id="name" type="text" />
</div>
<div>
<label for="email">your email</label>
<input name="email" id="email" type="text" />
</div>
</div>
CSS:
.myForm div {
width: 47%;
margin:0;
padding:0;
float:left;
}
.myForm div label
{
display:block;
}
fiddle
I have a simple form that consists of 2 textboxs. I'm just trying to make the form appearing in the middle of the page. There are no any extra elements in the page. By using align="center" the elements does move to the center but it's not the case for vertical-align:middle?
<html>
<body style="vertical-align: middle;">
<form>
<div align="center" style="vertical-align: middle;">
<h1>blabla</h1>
<label>
<span>Username: </span><input id="userName" type="text" name="userName" />
</label><br/>
<label>
<span>Password: </span><input id="passWord" type="password" name="passWord" />
</label><br/>
<input type="button" value="Login" />
</label>
</div>
</form>
</body>
</html>
Use the following CSS, it centers the content both vertically and horizontally.
You need to set the html/body to height:100%, then set the body, or the parent to display:table. After that, set the child to display:table-cell, and vertical-align:middle. That will take care of the vertical alignment. In order to center horizontally, use margin:0px auto;, and set a width on the form.
jsFiddle here
html, body {
height:100%;
width:100%;
margin:0px;
}
body {
display:table;
vertical-align:middle;
}
form {
display:table-cell;
vertical-align:middle;
width:240px;
margin:0px auto;
}
Full screen result here: http://jsfiddle.net/Sjk6m/embedded/result/
I'm trying to take my Form layout away from tables and entering the world of div's and css.
I'm having difficulty though in my layout. I'd like to order the elements where a label is positioned directly above an input.
Here's what it currently looks like:
I'd like the District Label and Textbox to be vertically aligned, but they seem to be forming a stair pattern.
Here's the css:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
margin-right:4px;
vertical-align:top;
}
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
and the HTML:
<div id="content">
<label for="txt_RequestId">Request Id</label>
<input id="txt_RequestId" type="text" />
<label for="txt_District">District</label>
<input id="txt_District" type="text" />
</div>
nest the input elements in the labels so the text label and field are grouped.
this usage is specified in the HTML4 spec:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
<div id="content">
<label>
Request Id<br />
<input id="txt_RequestId" type="text" />
</label>
<label>
District<br />
<input id="txt_District" type="text" />
</label>
</div>
CSS:
#content
{
position: absolute;
top: 110px;
left: 350px;
width: 775px;
height: 605px;
}
#content label
{
display:inline;
float:left;
margin-right:4px;
vertical-align:top;
}
example
Then apply display:inline and float:left to the <label>s (or use display:inline-block instead if you don't have to worry about older browsers example)
Change this
#content input
{
float:left;
margin:1px 20px 1px 1px;
}
to this
#content input
{
display:inline;
margin:1px 20px 1px 1px;
}
That is remove the float:left and replace with display:inline;.
Example: http://jsfiddle.net/jasongennaro/ptKEh/
EDIT
#mdmullinax pointed out that the question also requested the text be above the input field
Missed that ;-)
In that case, remove the display rules and use three brs
<div id="content">
<label for="txt_RequestId">Request Id</label><br />
<input id="txt_RequestId" type="text" />
<br />
<label for="txt_District">District</label><br />
<input id="txt_District" type="text" />
</div>
Revised example: http://jsfiddle.net/jasongennaro/ptKEh/2/
I generally use tables for forms that are laid out like this. They are much easier to work with than CSS (IMO) and the structure is much more clear.
<table>
<tr>
<td>
<label for="txt_RequestId">Request Id</label>
<br /><input id="txt_RequestId" type="text" />
</td>
<td>
<label for="txt_District">District</label>
<br /><input id="txt_District" type="text" />
</td>
</tr>
</table>
CSS is very good for moving elements around with respect to their container. However when you want things to be positioned in a very regular way, dependent on other elements, it can really obfuscate the logic. <table>s are much more explicit about this.