I am making an app for iOS, Android, BB, and also any other devices. I am working with webapp-net.
In my app, I have a fieldset containing different text fields. So this is what I have:
<fieldset>
<ul>
<li><input type="text" id="cc" placeholder="Card Number" autocomplete="off" onkeypress="return isNumberKey(event)" maxlength="23"/></li>
<li><input type="text" id="chn" placeholder="Holder Name" autocomplete="off" /></li>
<li><input type="text" id="cvc" placeholder="CSC" autocomplete="off" maxlength="4" /></li>
</fieldset>
For CSC, I need it to be only for 4 numbers, but I can't change the width. I also want to be able to create a pop up/dialog box, so when you click on CSC a box will appear with a little information about CSC.
I tried, but I can't even change the width. So if you know how to fix this problem please let me know!
Try using size attribute :
<input type="text" maxlength="4" size="4" />
Related
I have a Django form field that is prefilled and using widget gave it a class. The form is rendered out in html as
<div id="id_clothingType" class="closet-form-section form-clothing-type">
<div>
<label for="id_clothingType_0">
<input type="radio" name="clothingType" value="11" class="closet-form-section form-clothing-type" required="" id="id_clothingType_0">
Accessory
</label>
</div>
<div>
<label for="id_clothingType_1">
<input type="radio" name="clothingType" value="12" class="closet-form-section form-clothing-type" required="" id="id_clothingType_1" checked>
Top
</label>
</div>
</div>
How do I style the radio inputs as buttons such that it changes its background color when it is checked without changing the html (form template)?
The problem is that the input is within the labels, so I am unable use the conventional way of the input:checked + label to style them.
I have a Django form, which has a lot of fields so that I have to break it up to 3 pages. It means user has to fill some fields of the form in one page , and then they click next to go to next pages and continue to fill the forms.
To achieve that, I plan to display some fields of the form on each page.
I have come up with this code:
HTML Page 1:
<form method="POST" action="#" class="form">
{{form.email}}
{{form.phone_number}} ...
</form>
HTML Page 2 :
<form method="POST" action="#" class="form">
{{form.current_job}}
{{form.current_salary}}...
</form>
It works fine with this code but it just shows the form in basic appearance, I would like to use bootstrap to make it more beautiful.
My questions is that, how can I integrate bootstrap ?
I have come up with this solution, but it is hard-coded and difficult if I changes fields of the form in the future:
<label class="control-label" for="id_field1">Field 1</label>
<input class="form-control" id="id_field1" maxlength="50" name="field1" type="text"/>
<label class="control-label" for="id_field2">Field 2</label>
<input class="form-control" id="id_field2" maxlength="50" name="field2" type="text"/>
Thank you for your help!
I am switching from Django Crispy Forms to Floppy Forms, but my desired Bootstrap styling appears to be lost; now it just looks like a plain unstyled form.
Crispy
Here is what I had with Crispy Forms's Bootstrap template pack:
Here was the generated source:
<div id="div_id_sent_amount" class="form-group has-error">
<label for="id_sent_amount" class="control-label requiredField">How much would you like to give?
<span class="asteriskField">*</span>
</label>
<div class="controls ">
<select class="select form-control" id="id_sent_amount" name="sent_amount"><option value="" selected="selected">---------</option><option value="0.00">$0.00</option><option value="0.05">$0.05</option><option value="0.10">$0.10</option></select>
<span id="error_1_id_sent_amount" class="help-block"><strong>This field is required.</strong></span></div>
</div>
Floppy
Here is what I get with Floppy using the Bootstrap layout here.
Here is the generated source:
<div class="form-group error">
<label class="col-sm-4 control-label" for="id_sent_amount">Sent amount <span class="required">*</span>:</label>
<div class="controls col-sm-8 field-sent_amount">
<select id="id_sent_amount" name="sent_amount">
<option value="" selected="selected">---------</option>
<option value="0.00">$0.00</option>
<option value="0.05">$0.05</option>
<option value="0.10">$0.10</option>
</select>
<ul class="errorlist"><li>This field is required.</li></ul>
</div><!--- .controls -->
Any ideas on what I am missing?
floppyforms just provides easier layout and widget control, it does not automatically enable bootstrap styling.
For that, you have to do a bit of work as detailed in the documentation.
In summary, you have to create these templates:
floppyforms/templates/floppyforms/layouts/bootstrap.html
floppyforms/templates/floppyforms/rows/bootstrap.html
floppyforms/templates/floppyforms/layouts/default.html
floppyforms/templates/floppyforms/errors.html
Fill them with bootstrap-specific styling (examples are provided in the documentation).
Keep in mind the examples are for an older version of bootstrap; you might want to update the templates with the current version of bootstrap.
You can edit the templates by hand to bring them up to date, or use django-floppyforms-bootstrap3 which does exactly what it says - updates the templates for bootstrap3 compatibility.
I have a bug with an app in Symfony 1.4, in a page with a simple form :
$this->widgetSchema['list'] = new sfWidgetFormDoctrineChoice(array('multiple' => true, 'model' => 'Object', 'expanded' => true));
This code show a list of checkbox.
The datas are successfully loaded from the db.
On the form, I am able to check every option and validate my form.
But impossible to uncheck an option that is already "checked"
<ul class="list">
<li>
<input name="sf_guard_user_profile[list][]" type="checkbox" value="1" id="sf_guard_user_profile_list_1" />
<label for="sf_guard_user_profile_list_1">Option 1</label>
</li>
<li>
<span class="checked">
<input name="sf_guard_user_profile[list][]" type="checkbox" value="2" id="sf_guard_user_profile_list_2" checked="checked" />
<label for="sf_guard_user_profile_list_2">Option 2</label>
</span>
</li>
</ul>
Does anybody have an idea ?
I solved my problem.
It was a conflict with some jQueryUI plugin. I just had to disable it.
Thx for help anyway.
I have two different forms on my home page: one for logins and one for registrations. As you can see from the code, the forms have inputs with different names:
<h3> Log In </h3>
<form action="/login/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_login_username" type="text" name="login_username" maxlength="25" />
<input type="password" name="login_password" id="id_login_password" /><br>
<button type="submit" class="btn btn-info">Login</button>
</form>
<h3> Sign Up <small>(It's free!)</small></h3>
<form action="/register/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_register_username" type="text" name="register_username" maxlength="25" />
<input type="text" name="register_email" id="id_register_email" />
<input type="password" name="register_password" id="id_register_password" />
<input type="password" name="register_password2" id="id_register_password2" /><br>
<button type="submit" class="btn">Submit</button>
</form>
Which renders to this in Chrome:
What can be causing this? And how can I fix it?
That's a really good question and I'm sorry to say I have no idea. Did
you try to register once and also login at least once? If so, that
"might" be what's causing it as browsers come complete with the
"autoremember" feature.
Assuming autofill is enabled (it is by default), the reason it autofills the rest is because chrome's autofill server works on regular expressions, not exact matches.
All the regular expressions used for the various fields can be found in autofill_regex_constants.cc.utf8.
From there you can see that the expression for email field is "e.?mail" and for username it is "user.?name|user.?id|nickname|maiden name|title|prefix|suffix"
It appears a similar question has been asked before:
What is the correct way to stop form input boxes auto-completing?
There is an autocomplete attribute you can use in form fields.
<input id="id_login_username" type="text" name="login_username" maxlength="25" autocomplete="off" />