Today I wrote the code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
The purpose of this code is to get a form that all of its element are in the same line. In order to make this happen, I used the class "form-inline", which is a part of Bootstrap directory. However, since I didn't loaded the Bootstrap files in the header, I got the elements in separate lines.
So I spent a lot of time to understand what is wrong with my file.
What I expect is that my browser/IDE gives an error for using an unknown class. Do you know how I can get this feature?
Related
In my webapp i have made two <fieldset> one for four <input> fields and one for
checkboxes. Now i am using this parsely lib on these <fieldset> it is not working on it. but it works on othere pages that in which different fields have been made. now i don't know about this lib so much if it is work on checkboxes or not. and also i dont wanna apply parsely lib on these checkboxes.
So my question is :
why it does not work on given below code which is in my webapp it is
one page but on other page it works.?
Here's code:
<form id="form1" action="" method="POST" enctype="multipart/form-data" >
<input type="hidden" id="user_id" name="user_id" value="<?php echo empty($user_id)?"":$user_id;?>" />
<fieldset>
<legend>Basic Info</legend>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">First Name *</label>
<p id="validation"></p>
<input type="text" class="form-
control" id="fname" name="fname" value="<?php echo empty($fname)?"":$fname;?>"
placeholder="Enter First Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Last Name *</label>
<input type="text" class="form-control" id="lname" name="lname" value="<?php echo empty($lname)?"":$lname;?>" placeholder="Enter Last Name" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Email *</label>
<input type="text" class="form-
control" id="email" name="email" value="<?php echo empty($email)?"":$email;?
>"
placeholder="Enter Email" data-type="alphanum" maxlength="45"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Mobile #</label>
<input type="text" class="form-control" id="mobile" name="mobile" value="<?php echo empty($mobile)?"":$mobile;?>" placeholder="+55 99 99999999" data-type="alphanum" maxlength="45"/>
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-6">
<div class="form-group">
<label for="status">Status</label>
<div>
<span class="text-muted m-l-5">InActive</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Active</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="status">All Permissions</label>
<div>
<span class="text-muted m-l-5">No</span>
<input type="checkbox" data-render="switchery" id="status" name="status" data-theme="default" checked />
<span class="text-muted m-l-5">Yes</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
Here for checkboxes
</fieldset>
I found the answer to my question. after spending an hour reading official docs.It says
Checkbox, radio and select multiple are a bit different than regular
input, textarea or simple select. They need to have either a name or
an id attribute to be correctly bound and validated by Parsley.
Otherwise, they will be ignored and a warning will be put in the
console.
I want to validate 7 alphanumeric for 1 part of my form but it keeps telling me to follow the format even when I usepattern="[a-zA-Z0-9]".
Here is my code :
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" required pattern="\[a-zA-Z0-9]{7}"/>
</label>
</div>
</div>
and just asking but is it possible to validate radio box without javascript
I changed it to this and now it seems to be working:
<div class="control-group form-group">
<div class="control">
<label for="admin">Admin Number:
<input type="text" class="form-control" id="admin" name="admin" placeholder="eg. 123456A" pattern="[0-9A-Za-z]{7}"/>
</label>
</div>
</div>
I've been doing dev on this online form submissions site and using HTML/CSS to align the fields and what not. I was doing fine until i needed to put little boxes around each section because I would have too many div's and would close each other when I don't want them to. So my question is, is there a way to explicitly tell each closing </div> to close certain div class' or should I just use another tag in general.
HTML:
<div class="print_content">
<div class="generalinfo">
<h4>User Information</h4>
<hr/>
</div>
<!--form starts-->
<form>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<!-- added div class clear to have a half class in 1 row -->
<div class="clear"></div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="abc" class="alignleft">abc</label>
<span class="left-text">abcabc</span>
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="full">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<div class="half">
<div class="nocolor">
google
</div>
</div>
</div>
</div>
I think "< ul >" with some "< li >" would be great here.
Just do it like this:
<ul>
<li class="half">
<input ...
<label ...
</li>
</ul>
Further information http://www.w3.org/TR/html401/struct/lists.html
HTML often gives you more than one (or 10) possibilities to achieve something. Generally I like your approach to use a very basic element (like a div) if you don't know a more specific one.
If you're feeling again like you're using too much divs and that there might be another solution, just search for sites which have a similar solution than your product implemented. With "F12" (most browsers) you can explore what they've used.
I am trying to make an inline text field within a horizontal form, basically I want to split the form in to two sections ( left and right) , in the left hand I will have like horizontal text fields and some inline as well and on the right hand side I want to have some inline and some are not.
How could I establish something like that , maybe this drawing could help
JSFiddle Here : http://jsfiddle.net/XQx6v/
Here is my code which is not working ( I want to make it 900 px centered and also responsive to drop to the other line if its small):
<form class="form-horizontal" action="" method="POST">
<!-- first Row -->
<div style="margin:auto; width:900px;" class="row">
<div class="col-xs-6">
<div class="row">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" value="test" name="first_name" class="form-control beta">
<label class="control-label">Last Name</label>
<input type="text" value="test" name="last_name" class="form-control beta"> </div>
</div>
</div>
<!-- Next Column -->
<div class="col-xs-6">
<div class="row">
<p> testhghghjg </p>
</div>
</div>
</div>
</form>
Thanks
I think you don't actually want what Bootstrap refers to as an inline form, but a form with inline elements... Try this Bootply
<div class="container" style="max-width:900px">
<div class="row">
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 1</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 2</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 3</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 4</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
</div></div>
I am trying to make a pretty form that will work boostrap-responsive.css for mobile use. Before I used tables, and it worked fine without bootstrap-responsive, but now it becomes very ugly when scaled down.
What I'm trying to accomplish:
Get headline/label for each input to be in top(horizontal).
Aligned right side(so it will look pretty on a phone).
Have glyphicons prepended - this is what it makes difficult, since with them I can't format it correctly
If I am too unclear of what I want to accomplish, you can also take a look at my super hightech picture that describes the form:
http://i.imgur.com/xcvL0hp.jpg
My code half working code is:
<form class="form-vertical" ....>
<fieldset>
<div class="row-fluid">
<div class="span8 input-prepend">
<label class="control-label" for="title">Title</label>
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
<div></div>
<div class="span2 input-prepend">
<label class="control-label" for="price">Price</label>
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="controls">
<label class="control-label" for="description">Description</label>
<div class="input-prepend">
<span class="add-on"><i id="descriptionicon" class="icon-minus-sign"></i>/span>
<textarea name="description" rows="6" class="field span6" id="descriptionfield"></textarea>
</div>
</div>ยจ
</fieldset>
</form>
I am not sure I formatted it correctly for stackoverflow(this is my first question) so it is here too with syntax highlighting: http://pastebin.com/LzN1vbYi
I know there are tons of answers to very similar question, but that prepended glyph makes none of the code work. I tried around 15 different approaches.
you should try this form
<div class="row-fluid>
<div class="span12>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="price">Price</label>
<div class="controls">
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>`
</form>
</div>
</div>