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>
Related
This may seem like I'm missing something super simple, but I cannot for the sake of me figure this out.
I have a <form> wrapped inside a <div class="form">, and for some reason, in the browser, the form, and the div, have a height of 0, and all the content is overflow. When I inspect the document from the browser, the browser does not recognize this div or form.
Here's the problem area here:
Also, you can inspect it at this website here: Web page
<div class="form">
<form>
<div class="contact">
<label for="first">First Name:</label>
<input id="first" type="text" placeholder="First Name"><br>
<label for="last">Last Name:</label>
<input id="last" type="text" placeholder="Last Name"><br>
<label for="tel">Phone Number:</label>
<input id="tel" type="tel" placeholder="(###) ###-####"><br>
<label for="email">Email:</label>
<input id="email" type="email">
</div>
<div class="address">
<label for="address-1">Address</label>
<input id="address-1" type="text" placeholder="Address Line 1"><br>
<label for="address-2">Address, Line 2</label>
<input id="address-2" type="text" placeholder="Address Line 2"><br>
<label for="city">City:</label>
<input id="city" type="text" placeholder="City"><br>
<label for="state">State:</label>
<select id="state">
<optgroup>
</optgroup>
</select></br>
<label for="zip">Zip Code:</label>
<input id="zip" type="text" placeholder="01234">
</div>
</form>
</div>
Does you talk about that the div and form have height:0 and the content overflow?
If so, it is because the content divs have float css attributes. to fi it, you have to add at the end of the contents div with style clear:both
<div class="form">
<form>
<div class="contact">
...
</div>
<div class="address">
...
</div>
<div style="clear:both"></div>
</form>
</div>
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>
I have a form where the user has to choose between two modes, with two individual sets of inputs. Some inputs are required.
<form>
<div class="form-group">
<label>This or that?</label>
<div class="controls">
<label class="radio-inline">
<input type="radio" name="thisthat" value="this">
This
</label>
<label class="radio-inline">
<input type="radio" name="thisthat" value="that" checked>
That
</label>
</div>
</div>
<div class="this"> <!-- hidden as the page loads -->
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="This again" />
</div>
</div>
<div class="that">
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="That again" />
</div>
</div>
<button class="btn btn-info" type="submit">Submit</button>
</form>
Example on CodePen
When the user fills out one part of the form the submit is prevented because of the empty fields in the other part.
How can I disable the validation for the fields in the hidden part? Preferably without removing the required properties of the hidden inputs.
Is there a default way to do this?
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/
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>