I try to use div in blackberry os 5 and 7 but i cant get the proper result. please guide me..
or give a proper method of designing. i need scrollable div without wrapping it.
Format to use div in phonegap blackberry os5
<div data-role="header">
<h1>Auth Demo</h1>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
<div data-role="footer">
<h4>© Camden Enterprises</h4>
</div>
</div>
Related
First off, I know this question has probably been asked a million times. That being said, this is my first time putting my hand in the HTML/CSS cookie jar and I feel like a complete idiot for not being able to figure this out with all the resources available already. This is what I have come up with from god knows how many websites:
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<form autocomplete="off">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
</div>
</div>
</div>
<input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
</form>
</div>
</div>
It looks like this when I run it:
I would like to have some buffer around it like I see an all of the example codes. However, for some reason, when I try to add class="px-4 py-4" to the form scope definition nothing happens. I am sure I am doing something stupid and would appreciate any help on this. If I am missing any important information, please let me know and I will be happy to add it. Thank you.
I haven't found any reference about px-4 or py-4 class on W3.CSS reference page: https://www.w3schools.com/w3css/w3css_references.asp#padding
I think what you meant to use is w3-padding-small class (or any similar padding class present on the W3.CSS reference page) on the same element as the w3-dropdown-content class.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
<div class="w3-dropdown-content w3-bar-block w3-border w3-padding-small">
<form autocomplete="off">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
</div>
</div>
</div>
<input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
</form>
</div>
</div>
"w3-padding" does what you need. You may add the class "w3-border" around the inputs and the "Register Now" button. BTW i suggest you stick on one of the css libraries, either bootstrap or w3.css. Otherwise, it gets too complicated and may interfere each other. You may loose time while trying to understand why your code acts weird.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<div class="w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Register</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-padding">
<input type="text" placeholder="Username" class="w3-input"/>
<input type="email" placeholder="Email Address" class="w3-input"/>
<input type="password" placeholder="Password" class="w3-input"/>
<input type="password" placeholder="Confirm Password" class="w3-input"/>
<button class="w3-button">Register Now</button>
</div>
</div>
</div>
</body>
</html>
I am hosting a site on github i.e. githubpages.AS It is a static site I used Formspree for my contact form but unfortunately it is not working with custom designed Contact form (with required parameters put in specified fields).
But finally the clicking of submit button does no action at all..
Here is the code I am implementing for the form.
<div class="col-lg-6">
<form action="action="https://formspree.io/jmscb56#gmail.com" method="POST" role="form" class="contactForm">
<div class="row">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="col-lg-6">
<div class="form-group contact-block1">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<textarea class="form-control" name="message" rows="6" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<!-- <input type="submit" class="btn btn-defeault btn-send" value="Send"> -->
<button type="submit" value="Send">Send</button>
</div>
<input type="hidden" name="_next" value="https://ghac-2017.github.io/#contact" />
</div>
</form>
</div>
Any help would be appreciated..As I cannot find what i felt short of..
Actually You cannot use formspree form as per your own customization , i.e. editing the basic (given/allotted) form values. It will work well when you use the given form values without your own customization , it will loose its functionality if you edit the basic layout of the given form by formspree.
I'm trying to create a contact form within a container, but every time I'm trying to test it or resize the browser or used mobile, the text input field doesn't remain on the container. The text field goes beyond the form
<div class="col-md-4">
<div class="thumbnail">
<div class="container">
<form id="frmContact" action="" method="post">
<div id="mail-status"></div>
<div>
<label style="padding-top:0px;">Name:</label>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox" placeholder="Enter Full Name">
</div>
<div>
<label>Email:</label>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox" placeholder="Enter E-mail Address">
</div>
<br>
<div>
<label>Attachment:</label><br/>
<input type="file" name="attachmentFile" id="attachmentFile" class="demoInputBox">
</div>
<br>
<div>
<label>Subject:</label>
<span id="subject-info" class="info"></span><br/>
<input type="text" name="subject" id="subject" class="demoInputBox" placeholder="Subject">
</div>
<div>
<label>Content:</label>
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox" cols="" rows="5" placeholder="Concerns"></textarea>
<br>
</div>
<div>
<input type="submit" value="Send" class="btnAction" />
</div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>
</div>
</div>
</div>
The Best way to deal with this kind of approach is to use
Mediaqueries.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
you can use that link as a guide.
You can also use Flex to make it responsive :) hope this helps.
I am dead trying various combinations to stop browser (not only Chrome, but also Mozilla) from irritating autocomplete, and still no success. What I have for now:
<form id = 'user_form' autocomplete="off" role="form">
<input name="hidden" type="text" style="display:none;">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input autocomplete="off" class="form-control input-sm" id="id_username"
maxlength="30" name="username"
placeholder="Имя пользователя" required="" type="text" />
</div>
</div>
</form>
I did not post any JSFiddle, because it's no help for this question. I've also tried false in place of off. But no success again.
UPDATE
After following 's suggestion, I have modified the code to include hidden password input, and in Firefox it's all right now. But in Chrome autocomplete still works for real password-type inputs.
My code as is:
<form id = 'user_form' autocomplete="off" role="form">
<input style="display:none"/>
<input type="password" style="display:none"/>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<div class = 'zeon_non_field_error_wrap'>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input autocomplete="off" class="form-control input-sm" id="id_username" maxlength="30" name="username" placeholder="Имя пользователя" required="" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input autocomplete="off" class="form-control input-sm" id="id_password" maxlength="128" name="password" placeholder="Пароль" required="" type="password" />
</div>
</div>
</form>
I found that Chrome only autocompletes the first <input type="password"> and the previous <input>. So the workaround would be to add to the top of the <form>:
<input style="display:none">
<input type="password" style="display:none">
Depending on chrome versions. Works for me on Chrome 47
So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.