I have made a simple form , you can check it on http://bspldev.review/phpmailer/ , using bootsrap its working fine on desktop but on mobile input field for name and email is not editable, that we can not write anything , only mobile field is working in mobile view, here is simple form code, i have give proper links for bootstrap and jquery library in header, here i will give excerpt of form only,
<form method="POST" name='' id="woohooEmail" action="">
<div class="form-group">
<label class="sr-only" for="fullname">Name</label>
<input type="text" class="form-control" placeholder="name" name="LastName">
</div>
<div class="form-group">
<label class="sr-only" for="mobile">Mobile</label>
<div class="input-group">
<div class="input-group-addon">
+91
</div>
<input type="text" class="form-control" placeholder="mobile" name="Mobile">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="area">Email</label>
<input type="email" class="form-control" placeholder="email" name="Email">
</div>
<div class="pad">
<button type="submit" name="submit" id="submit" value="" class="btn btn-default btn-text ">
Schedule
</button>
<i class="fa fa-circle-o-notch fa-spin" id="icon-load" style="font-size:24px; color:red; display:none"></i>
</div>
<form>
Please check this on mobile and kindly suggest me some solutions
In your mobile image is coming above the form, So increase your z-index of form's parent div or decrease z-index of your image in mobile screen using media query. You haven't add the div in above code so i just add z-index on form.Like :-
#media screen and (max-width: 768px) {
#woohooEmail{
z-index:9999;
}
or here you just can simply add z-index without media query too. it will work for every device
Build the form using boostrap's grid system. you can use one row spanning all the 12 columns and use the col-sm attribute
Related
So, I'm trying to create a mobile responsive web app, I've already managed to fit it properly on mobile devices, but I don't want the "second form" to go above the first one, but to create a multi-step form when viewing on mobile devices.
Here's my code so far:
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
</form>
</div>
(I have two forms like this one)
Use this code for Multistep Form its easy use for you...
and if you are using bootstrap so multi step form is so easy on bootstrap with fully responsive.
Custome Multistep
Bootstrat Multistep
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I'm trying to realize a fixed floating panel over my site that loads an iframe with a login form. It seems to work fine with every mobile browser except for firefox mobile (firefox desktop works fine) that prevents every kind of input.
When I try to write something (with stock keyboard on android 6.0.1) in a form inside an iframe it seems to buffer the text but nothing appear on input element. Moreover when I click on any input field outside my iframe, the whole text written before get attached in this field.
<img id="logo" src="icons/logo-little-BLACKBACK.png">
<div id="logingeneric" tabindex="-1" role="dialog" aria-hidden="true">
<div class="generic-dialog">
<div class="generic-content">
<div class="generic-header">
<h4 class="text-center">Login</h4>
</div>
<div class="generic-body">
<form class="form center-block" action="Home.php" method="post">
<div class="form-group">
<input id="email-field" name="username" class="form-control input-lg input-field" placeholder="Email" type="text">
</div>
<div class="form-group">
<input id="password-field" name="password" class="form-control input-lg input-field" placeholder="Password" type="password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Accedi</button>
</div>
</form>
</div>
<div class="generic-footer">
<span class="pull-right" id="registrati">
Registrati
</span>
<span class="pull-left">
Password dimenticata?
</span>
</div>
</div>
</div>
</div>
This is the body of the page loaded inside my iframe. How can I avoid this strange behaviour of Firefox mobile?
Thank you!
Eventually I got a solution. In our case we override the onResize event that is triggered on every input focus in order to correctly scale the floating panel. This led to a focus lost on every "zoom on focus" on firefox (a bug maybe?).
The solution is to avoid panel scaling if an input element is focused.
I am developing a mobile application with jquery mobile, php ,phonegap and cordova
I have a requirement that in the virtual keyboard of all form elements like Text boxes should have next and previous buttons and for the last text box the Done/Go/Enter option should be shown.
How can I handle those buttons programatically without adding plugins.
Here is my form
<form id="loginForm" name="form1">
<div class="row mainpart paddingleftandright clsfieldPadding">
<div class="col-lg-12">
<div class="input-group1" id="email_div">
<input type="email" id="login_form_email"
placeholder="EMAIL ADDRESS" value="" data-clear-btn="true"
data-mini="true" tabindex='1' class="clsPyType clsBodyTxt" autocapitalize="off" onBlur="getPasswordProtectionStatus(this.value);checkLoginEmail(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id1">!</span></span>
</div>
</div>
</div>
<div id="login_form_email_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright clsfieldPadding2">
<div class="col-lg-12">
<div class="input-group1" id="password_div">
<input type="password" id="login_form_password"
placeholder="PASSWORD" value="" data-clear-btn="true"
autocomplete="off" data-mini="true" tabindex='2' class="clsPyType clsBodyTxt" onBlur="checkLoginPassword(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id2">!</span></span>
</div>
</div>
</div>
<div id="login_form_password_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12 remember-me">
<select name="slider" data-role="slider" id="rememberMe">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="col-sm-5 clsPyTypeUprBold Clsremember">Remember Login</div>
</div>
</div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12">
<!-- <a data-role="button" data-transition="flip"
data-direction="reverse" class="clsBtnHead2 clsBtnRed" id="login_form_submit" onClick="login_form_submit();"><div class="clsBtnTop">LOGIN</div></a> -->
<input type="submit" tabindex='3' id="login_form_submit" class="clsBtnHead2 clsBtnRed" onfocus=" $(this).trigger('click');" value="LOGIN"/>
</div>
</div>
If any one have better ideas please share
All of the fields within a form will have the prev / next buttons which act like tabs do on a real keyboard. The done/Go/enter buttons... well they will naturally occur if there is data to submit. I think this just boils down to semantics and building your form correctly.
In the screen shot, the first field is focused, the next button is available (chevron pointing to the right) and the form is able to be submitted via the GO button. It can be submitted as for all the device knows this form is complete, your validation will decide whether or not the data is complete. What I am getting at here is that you won't be able to hide the return/Go button at will. However you can omit it using a numerical keypad.
The 'done' message occurs above the virtual keyboard and does not submit (unless you submit on blur, as using it blurs whatever field you were focusing on), and looks like a text link.
The 'Enter' & 'Go' buttons will submit the form. So if the last field in your form is numerical (big finger buttons) then you won;t be able to use it for submission unless you submit the form on blur of that field.
Here is a working example: http://codepen.io/morganfeeney/pen/ojdRMQ
I built that to test virtual keyboards on handheld devices. Go and check it out on your iPhone ;)
FYI: the example code you supplied does not have a closing </form> tag.
So I'm using bootstrap form helpers to make selecting a country and region easier. Here is some of the code. I want to take this and input it into my db. It currently won't.
<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true" name="country">
<input type="text">
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2" name="stateOrProvince">
<input type="text">
</div>
</div>
However, this does
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="ironbat#example.com">
</div>
How can I enter the former into the form without wrecking the formatting (its very pretty :) )
As a template, here is a similar setup/strategy:
https://scotch.io/tutorials/easy-node-authentication-setup-and-local