I'm trying to make a simple utility for my FAQ sections on a website. so far I have come up with a simple form that has 5 questions and 5 answers, and I am trying to grab the variables from each text box and insert them into the FAQ schema text, but I just can't figure it out.
This is what I have so far. I have tried using {} and #{} but it just displays them as text. I have written this already in PowerShell with winforms, but I find PowerShell much easier to use.
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>FAQ Schema Creator</p>
<form onInput='faq.value="[sc_fs_multi_faq headline-1=\"h4\" question-1=\"q1.value\" answer-1=\"a1.value\" headline-2=\"h4\" question-2=\"a2.value\" answer-2=\"\" headline-3=\"h4\" question-3=\"\" answer-3=\"\" headline-4=\"h4\" question-4=\"\" answer-4=\"\" headline-5=\"h4\" question-5=\"\" answer-5=\"\" \"count=\"5\" html=\"true\" css_class=\"\"]"'>
<label for="fname">Question 1:</label>
<input type="text" id="q1" name="q1">
<label for="lname">Answer 1:</label>
<input type="text" id="a1" name="a1"><br>
<br>
<label for="fname">Question 2:</label>
<input type="text" id="q2" name="q2">
<label for="lname">Answer 2:</label>
<input type="text" id="a2" name="a2"><br>
<br>
<label for="fname">Question 3:</label>
<input type="text" id="q3" name="q3">
<label for="lname">Answer 3:</label>
<input type="text" id="a3" name="a3"><br>
<br>
<label for="fname">Question 4:</label>
<input type="text" id="q4" name="q4">
<label for="lname">Answer 4:</label>
<input type="text" id="a4" name="a4"><br>
<br>
<label for="fname">Question 5:</label>
<input type="text" id="q5" name="q5">
<label for="lname">Answer 5:</label>
<input type="text" id="a5" name="a5"><br><br>
Output is:<br><output name="faq"></output>
</form>
</body>
</html>
Try separating the string from the formvalues by replacing question-1="q1.value" with question-1=""+q1.value+"". Note the extra "+ and +". Like so:
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>FAQ Schema Creator</p>
<form onInput='faq.value="[sc_fs_multi_faq headline-1=\"h4\" question-1=\""+q1.value+"\" answer-1=\""+a1.value+"\" headline-2=\"h4\" question-2=\""+a2.value+"\" answer-2=\"\" headline-3=\"h4\" question-3=\"\" answer-3=\"\" headline-4=\"h4\" question-4=\"\" answer-4=\"\" headline-5=\"h4\" question-5=\"\" answer-5=\"\" \"count=\"5\" html=\"true\" css_class=\"\"]"'>
<label for="fname">Question 1:</label>
<input type="text" id="q1" name="q1">
<label for="lname">Answer 1:</label>
<input type="text" id="a1" name="a1"><br>
<br>
<label for="fname">Question 2:</label>
<input type="text" id="q2" name="q2">
<label for="lname">Answer 2:</label>
<input type="text" id="a2" name="a2"><br>
<br>
<label for="fname">Question 3:</label>
<input type="text" id="q3" name="q3">
<label for="lname">Answer 3:</label>
<input type="text" id="a3" name="a3"><br>
<br>
<label for="fname">Question 4:</label>
<input type="text" id="q4" name="q4">
<label for="lname">Answer 4:</label>
<input type="text" id="a4" name="a4"><br>
<br>
<label for="fname">Question 5:</label>
<input type="text" id="q5" name="q5">
<label for="lname">Answer 5:</label>
<input type="text" id="a5" name="a5"><br><br>
Output is:<br><output name="faq"></output>
</form>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form practice</title>
</head>
<body><h1>Register</h1>
<form>
<label for="first name">First Name</label>
<input id="first name" type="text" name="first name" placeholder="John" required>
<label for="last name">Last Name</label>
<input id="last name" type="text" name="last name" placeholder="Smith" required>
<div>
<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male">
<label for="female">Female</label>
<input id="female" type="radio" name="gender" value="female">
<label for="other">Other</label>
<input id="other" type="radio" name="gender" value="other">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required placeholder="your email">
<label for="password">Password:</label>
<input type="password" name="password" id="password" pattern=".{5,10}" title="5 to 8 characters" required>
</div>
<div>
<label>
Birthday:
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
<select month="day">
<option>Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
</select>
<select month="year">
<option>Year</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>
</label>
</div>
<div>
<label for="agreed">I agree to the terms and conditions</label>
<input id="agreed" type="checkbox" name="agreed">
</div>
<input type="submit" name="">
</form>
</body>
</html>
The pattern attribute in the input tag for the password is not working, neither is the title attribute. Only the required attribute is working.
I have tried checking in Chrome and Safari.
Is it deprecated?
In what other way can I add a validation for minimum length (aside from using JS)?
I'm not sure what the problem is. I copy-pasted your code and it works fine on my end, unless I'm misinterpreting your question. Can you explain the issue you are having further? I tested it in both Chrome and Firefox:
and the title:
I am taking a course and one of our projects is to create a form. Forgive me as I am a total newbie here.
The instructor is asking that the form action attribute="#" and the method="post"
When I use the # I just get an error
<form name="my-form" action='#' method='post'>
<fieldset>
<legend>Sign Up Here</legend>
<div class="form-box">
<label for="username">Username</label>
<input type="text" id="username" name="username" tabindex="1" placeholder="Username">
</div>
<div class="form-box">
<label for="email">Email</label>
<input type="email" id="email" name="email" tabindex="2" placeholder="Email" required>
</div>
<div class="form-box">
<label for="phone-number">Phone</label>
<input type="text" id="phone-number" name="phone-number" tabindex="3" placeholder="Phone" required>
</div>
<div class="form-box">
<label for="password">Password</label>
<input type="password" id="password" name="pass" tabindex="4" placeholder="Password" required>
</div>
<div id="message">
<h6>Password must contain the following:</h6>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<div class="form-box">
<label for="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" name="password-confirm" tabindex="5" placeholder="Confirm Password" required>
</div>
<div class="form-box">
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" class="uploader button-upload">
</div>
<div class="form-box">
<button class="btn" id="btnSend" tabindex="6">Register</button>
</div>
</fieldset>
</form>
This page isn’t working If the problem continues, contact the site owner.HTTP ERROR 405
This is on google chrome.
I want to create a registration form with the following order on each line:
label input label input
label input label input
I wrote some code and managed to get the order right
The problem is that the labels and therefore the text inside them are not aligned between the different lines and the same goes for the inputs.
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
<div class="input-group">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
<div class="input-group">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<input type="submit" value="Add">
</form>
</div>
.left-align-field{
display: inline-block;
float: left;
clear: left;
width: 300px;
text-align: left;
padding: 5px;
}
.right-align-field{
display: inline-block;
float: left;
padding: 5px;
}
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<div class="left-align-field">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
</div>
<div class="right-align-field">
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<input type="submit" value="Add">
</div>
</form>
</div>
I am learning HTML and I am having trouble understanding something. I was checking out this website Create Amazing Web Forms.
I copied the following HTML from their site:
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
Here is my entire web page for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="David Warwick">
<meta name="description" content="User Profile">
<meta name="keywords" content="profile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/page-format.css">
<link rel="stylesheet" type="text/css" href="CSS/header-navigation.css">
<link rel="stylesheet" type="text/css" href="CSS/advertisement.css">
<script src="scripts/Jscripts.js"></script>
<title>User Profile</title>
</head>
<body>
<div id="container">
<div id="header">
<header>
<h1>User Profile</h1>
<nav>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="index.html">Home</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="WarwickDavidAssignment6.html">C# Classes</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="about-me.html">About Me</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="userprofile.html">User Profile</a>
</nav>
</header>
</div>
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
<div id="body">
<main>
<form>
<label for="frmNameA">Name
<input type="text" name="name" id="frmNameA" required
autocomplete="given-name">
</label>
</form>
</main>
<aside>
<img id="Advertisement" src="Images/ad.png" alt="Advertise with us" draggable="true"
ondragstart="drag(event)" />
</aside>
<div id="DropZone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<footer id="footer">
<p>© 2019 David Warwick</p>
</footer>
</body>
</html>
On their website when I use Google Chrome logged in with my Google Account, all of the form fields populate with my name, address, phone number, email, etc. But when I paste this HTML into my HTML file in Visual Studio Code and view my web page from Google Chrome, it doesn't populate with my information. The only field that works is phone and email. And if I enter my phone or email, none of the other fields populate.
Why is this happening and what am I missing?
I think I may have found the answer here: Google Chrome Help - Fill Out Forms Automatically
According to that page, one of the reasons that form data may not be suggested by Chrome is that the site is not secure enough. Well, I am viewing a local html file from my C drive and my "site" is not secure at all. The following is a quote from the Google Chrome Help site mentioned above.
Chrome doesn't suggest my saved info
If you don't get suggestions when you fill out a form, either:
The website might not be secure enough to get this info from Chrome.
If the website is secure, learn how to fix issues with saved info.
Chrome might not detect certain fields in the form.
Hopefully that is what is going on.
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>