Well I created a jquery mobile form but the every element is in a new line. I would put PR field after Birth Place in a unique line and the radio button Male/Female in the same line to Birth Date. How can I do? I even tried to use grid columns layout but didn't work.Here is it my own code:
<div data-role = "content">
<form action = "?" method="post" name="form" id = "form">
<fieldset>
<div data-role = "fieldcontain" class = "ui-hide-label">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="" placeholder="Address"/>
</div>
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
<label for="radio-choice-1">Male</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" />
<label for="radio-choice-2">Female</label>
</fieldset>
</div>
<div data-role="fieldcontain" data-type="horizontal">
<label for="select-choice-0"></label>
<select name="select" id="select">
<option value="politrauma">Politrauma</option>
<option value="cardiologico">Cardiologico</option>
<option value="neurologico">Neurologico</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
Grid Layout of two columns works fine. Below is the code after modification.
<form action = "?" method="post" name="form" id = "form">
<fieldset>
<div data-role = "fieldcontain" class = "ui-hide-label">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="" placeholder="Address"/>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
</div>
<div class="ui-block-b" style="width:48.5%">
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
</div>
</div>
<div class="ui-block-b">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
<label for="radio-choice-1">Male</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" />
<label for="radio-choice-2">Female</label>
</fieldset>
</div>
</div>
</div>
<div data-role="fieldcontain" data-type="horizontal">
<label for="select-choice-0"></label>
<select name="select" id="select">
<option value="politrauma">Politrauma</option>
<option value="cardiologico">Cardiologico</option>
<option value="neurologico">Neurologico</option>
</select>
</div>
</div>
</fieldset>
</form>
Related
Following is the html code. All I wanted to know if there are limits to putting html elements for form designing.
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="process.php" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<!-- <div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div> -->
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
your code seems to run fine. There are no limits to how many elements you can have in a form - possibly limited my memory. Why do you think your form isn't working?
also for phone input try the following:
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="https://www.google.com" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div>
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
you can check the link so you can check what I'm trying to say.
and here is the code that I wrote. for that form. I did not style the .
https://kevkevkevin.github.io/contactform_/
<div id="form_">
<h2>Contact Us</h2>
<form action="#">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" placeholder="Your Name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="subj"><span>Subject</span>
<select name="sbj" class="form-control" id="slct_bg">
<option class="special" value="Appointment">Appointment</option>
<option class="special" value="Interview">Interview</option>
<option class="special" value="Regarding a post">Regarding a post</option>
</select>
</label>
</div>
<div class="form-group">
<label for="email">Message:</label>
<textarea class="form-control" rows="5" id="message" placeholder="Leave your message here*" required></textarea>
</div>
<a href=""><div class="button_">
Submit
</div> </a>
</form>
</div>
I am still working on a project for school that is a web site for my children. I just put in a form but the fields don't seem to line up with the text boxes. I don't see what I'm doing wrong. I've searched the web and this site for answers. I believe the teacher wants the form to actually be set up within and using form tags. Any help is appreciated. Here is my HTML for my form.
<section>
<div id="salesDetails"><h2>Sales Details</h2>
<form name="checkOut" method="post" method="get" action="mailto:etw11241#aol.com";>
<div class="formRow">
<label for="contactName"><p>Contact Name</p></label>
<input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50"
placeholder="Enter your full name." required autofocus/>
</div>
<div class="formRow">
<label for="phoneNumber"><p>Phone Number</p></label>
<input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
</div>
<div class="formRow">
<label for="emailAddress"><p>Email Address</p></label>
<input name="emailAddress" id="emailAddress" type="email" size="50" required/>
</div>
<div class="formRow">
<label for="address"><p>Address</p></label>
<input name="address" id="address" type="text" size="50" required/>
</div>
<div class="formRow">
<label for="serviceSelection"><p>Service Selection</label>
<select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
<option value="-1">-Select (Max 2)-</option>
<option value="1">Lawnmowing/Front Yard----00001----$10</option>
<option value="2">Lawnmowing/Backyard----00002----$10</option>
<option value="3">Lawnmowing/Whole Yard----00003----$20</option>
<option value="4">Leaf Raking/Front Yard----00004----$15</option>
<option value="5">Leaf Raking/Backyard----00005----$15</option>
<option value="6">Leaf Raking/Whole Yard----00006----$30</option>
<option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
<option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
</select>
</div>
<div class="formRow">
<label for="specialRequests"><p>Special Requests</p></label>
<textarea cols="40" rows="6" name="specialRequests" id="specialRequests" ></textarea>
</div>
<div class="formRow">
<label for="serviceNeededBy"><p>Service Needed By</p></label>
<input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50"/>
</div>
<div class="formRow">
<input style="width:70px" type="submit" value="Submit"/>
<input style="width:70px" type="reset" value="Reset"/>
</div>
</section>
Am I missing HTML or CSS dimensions?
That's because you've displayed the fields within paragraphs which will result in linebreaks by default after the field.
Try the following HTML :
<section>
<div id="salesDetails">
<h2>Sales Details</h2>
<form name="checkOut" method="post" method="get" action="mailto:etw11241#aol.com" ;>
<div class="formRow">
<label for="contactName">
Contact Name
</label>
<input autofocus autocomplete="off" name="contactName" id="contactName" type="text" size="50" placeholder="Enter your full name." required autofocus/>
</div>
<div class="formRow">
<label for="phoneNumber">
Phone Number
</label>
<input placeholder="Include area code" name="phoneNumber" id="phoneNumber" type="tel" size="50" required/>
</div>
<div class="formRow">
<label for="emailAddress">
Email Address
</label>
<input name="emailAddress" id="emailAddress" type="email" size="50" required/>
</div>
<div class="formRow">
<label for="address">
Address
</label>
<input name="address" id="address" type="text" size="50" required/>
</div>
<div class="formRow">
<label for="serviceSelection">
Service Selection</label>
<select name="serviceSelection" id="serviceSelection" multiple="multiple" required>
<option value="-1">-Select (Max 2)-</option>
<option value="1">Lawnmowing/Front Yard----00001----$10</option>
<option value="2">Lawnmowing/Backyard----00002----$10</option>
<option value="3">Lawnmowing/Whole Yard----00003----$20</option>
<option value="4">Leaf Raking/Front Yard----00004----$15</option>
<option value="5">Leaf Raking/Backyard----00005----$15</option>
<option value="6">Leaf Raking/Whole Yard----00006----$30</option>
<option value="7">Snow Shoveling/Average Driveway----00007----$20</option>
<option value="8">Snow Shoveling/Long Driveway----00008----$30</option>
</select>
</div>
<div class="formRow">
<label for="specialRequests">
Special Requests
</label>
<textarea cols="40" rows="6" name="specialRequests" id="specialRequests"></textarea>
</div>
<div class="formRow">
<label for="serviceNeededBy">
Service Needed By
</label>
<input name="serviceNeededBy" id="serviceNeededBy" type="date" size="50" />
</div>
<div class="formRow">
<input style="width:70px" type="submit" value="Submit" />
<input style="width:70px" type="reset" value="Reset" />
</div>
</section>
I usually do something like this :
<form action="">
<div class="control">
<div class="label">
<label for="something">Something</label>
</div>
<div class="input">
<input type="text" name="something">
</div>
</div>
</form>
The notion is that we wrap each label/input in its own container, and provide two containing elements for the actual form fields themselves. Let the label float to the side, and provide an equal amount of margin-left on the input container.
.control .label{
float:left;
width:80px;
display:inline;
}
.control .input{
margin-left:100px;
}
This makes for a very tidy layout, containing all types of different form fields; a very dependable and easily controllable pattern.
A bit like so :
https://jsfiddle.net/64jnaqak/
I don't understand why this is not working. I'm trying to get these two form elements side by side. Also I would like to be able to have some elements side by side and some arranged below in the same form (as in future elements will be below these two). I left off the role="form" since I'm using Struts 1 and this breaks the <html:form> tag.
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
JSFiddle
You have to put your controls into an input-group:
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="input-group">
<div class="form-group">
<div>
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
<div class="form-group">
<div>
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/3/
EDIT:
Or you can try using grids:
<form>
<div class="container">
<div class="row">
<div class="col-xs-1">
<label for="startDate">from</lable>
</div>
<div class="col-xs-3">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate"class="datepicker form-control">
</div>
<div class="col-xs-1">
<label for="endDate">to</lable>
</div>
<div class="col-xs-3">
<input type="text" name="endDate" value="" readonly="readonly" id="startDate" class="datepicker form-control">
</div>
</div>
</div>
</form>
http://jsfiddle.net/3h3NB/76/
You can do this on the HTML
<form name="someForm" method="post" action="/someAction.do" class="form-inline">
<div class="form-group">
<label for="startDate" >
From
</label>
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="datepicker form-control"/>
</div>
<div class="form-group">
<label for="endDate">
To
</label>
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="datepicker form-control"/>
</div>
and do this on the CSS
.form-group{
float:Left;
}
JSfiddle link
For Bootstrap3 you can do something like this
<form name="someForm" method="post" action="/someAction.do" class="form-horizontal">
<div class="form-group">
<div class="col-xs-20">
<div cass="form-inline">
<label for="startDate" class="col-xs-2 control-label">From</label>
<div class="col-xs-2">
<input type="text" name="startDate" value="" readonly="readonly" id="startDate" style="width: 70px;" class="form-control" placeholder="From">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-20">
<div class="form-inline">
<label for="endDate" class="col-xs-2 control-label">To</label>
<div class="col-xs-2">
<input type="text" name="endDate" value="" readonly="readonly" id="endDate" style="width: 70px;" class="form-control" placeholder="To">
</div>
</div>
</div>
</div>
</form>
See Online example
You can find more examples at Twitter Bootstrap Forms tutorial.
I'm using html and jquery mobile.here is the code:
<div data-role = "content">
<form action = "?" method="post" name="form" id = "form">
<fieldset>
<div data-role = "fieldcontain" class = "ui-hide-label">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
<div data-role ="fieldcontain" class= "ui-hide-label">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="" placeholder="Address"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" />
<label for="radio-choice-1">Male</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" />
<label for="radio-choice-2">Female</label>
</fieldset>
</div>
<div data-role="fieldcontain" data-type="horizontal">
<label for="select-choice-0"></label>
<select name="select" id="select">
<option value="politrauma">Politrauma</option>
<option value="cardiologico">Cardiologico</option>
<option value="neurologico">Neurologico</option>
</select>
</div>
</fieldset>
</form>
</div>
I'm not able to put in the same line two input text. I tried block grid but it didn't work
You should look at two column layout in jquerymobile:
jquerymobile.com/demos/1.0.1/docs/content/content-grids.html
Your code should be something like this:
<form action = "./includes/user_form.php" method="post" id = "form">
<div class="ui-grid-a">
<div data-role = "fieldcontain" class = "ui-hide-label ui-block-a">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label ui-block-b">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
</div>
</form>
I know this question is kind of old but I just had the same problem and this is what worked for me:
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="" name="" value="">
</div>
<div class="ui-block-b">
<input type="text" id="" name="" value="">
</div>
You can even add some style to change the relative size of the field.
Just add floats to the divs:
<form action = "./includes/user_form.php" method="post" id = "form">
<div data-role = "fieldcontain" class = "ui-hide-label" style="float:left">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div data-role ="fieldcontain" class= "ui-hide-label" style="float:left">
<label for="surname">Surname</label>
<input type="text" name="surname" id="surname" value="" placeholder="Surname"/>
</div>
</form>
I'm using <span> wrapper around input with class that overrides display attribute of nested <div> (generated by jquery mobile). Also you must explicitly set width of input.
Example http://jsfiddle.net/FabyD/
CSS:
.inlineinput div {
display: inline;
}
HTML:
<div>
some text
<span class="inlineinput">
<input type='text' style='display: inline; width: 50px;' />
</span>
some text
<span class="inlineinput">
<input type='text' style='display: inline; width: 50px;' />
</span>
some text
</div>
DIVs are block elements - by default they take up 100% width. This makes the following elements appear on "the next line".
So, you need to move the second set on elements into the same DIV as the first (or re-style your DIVs with a fixed-width and use floats, but that's a little more challenging)
Another tip is checking out the data-type="horizontal" -type (no pun intended).
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<div data-role="fieldcontain">
<label for="textinput11">
Something:
</label>
<input name="something" id="textinput11" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textinput12">
Something else:
</label>
<input name="something_else" id="textinput12" placeholder="" value="" type="text">
</div>
</fieldset>