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.
Related
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.
I have a form which has a div tag within it to help style the second part of my form into a second column. However my close form tag now doesn't work. Is there a reason why?
I have a localstorage.js which is working perfectly up until <div id="form-group">. Please, help! I'm so close to completing this page.
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr />
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</form>
You have unclosed div tags try closing them. close the <div id="form-group> and the div before <div class= "line-seprator">
You've forgotten to close a <div> tag. Use this:
<div id="section">
<form id="franchiseForm" action ="javascript:void(0);" method="POST">
<div class="field">
<label for="fran_name">Franchise Name</label>
<input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" autofocus required tabindex="1">
<br>
</div>
<div id="form-group">
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Mon" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<span>-</span>
<input type="text" name="Monday" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<hr>
</div>
</div>
<div>
<div class="line-separator"> </div>
<div class="field">
<input type="submit" value="Save">
</div>
</div>
</form>
</div>
You can check markup errors with an HTML validator. This one is good enough for most cases.
I am trying to format a two-column form so that:
the labels are above each input field or text area
everything in class col1 is in the column on the left
everything in class col2 is in the column on the right
everything in class col12 spans both columns
Here is the HTML code I need this to work with:
<div id="contactForm">
<form method="post" action="">
<h3>Contact us</h3>
<p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p>
<fieldset>
<div class="col1">
<label for="form_firstname">Firstname <span class="required">*</span></label>
<input type="text" id="form_firstname" name="form_firstname" value="" />
</div>
<div class="col2">
<label for="form_lastname">Lastname <span class="required">*</span></label>
<input type="text" id="form_lastname" name="form_lastname" value="" />
</div>
<div class="col1">
<label for="form_address">Address</label>
<input type="text" id="form_address" name="form_address" value="" />
</div>
<div class="col2">
<label for="form_city">City</label>
<input type="text" id="form_city" name="form_city" value="" />
</div>
<div class="col1">
<label for="form_email">Email <span class="required">*</span></label>
<input type="text" id="form_email" name="form_email" value="" />
</div>
<div class="col2">
<label for="form_phone">Phone <span class="required">*</span></label>
<input type="text" id="form_phone" name="form_phone" value="" />
</div>
<div class="col12">
<label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label>
<textarea id="form_attachment" name="form_attachment" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<textarea id="form_message" name="form_message" rows="5"></textarea>
</div>
<div class="col12">
<label for="form_message">Message <span class="required">*</span></label>
<input type="submit" value="Send" formnovalidate="formnovalidate" />
</div>
</fieldset>
</form>
</div>
How do I code the CSS to style this HTML as required?
Here is the code on JSFiddle.
Try this CSS:
#contactForm{
width: 80%;
}
label,.col1,.col2,.col12{display: block;}
.col1{ float:right;}
.col2{float:left;}
.col12{clear:both;}
textarea{
display: block;
width: 100%;
}
http://jsfiddle.net/rx2gjpdw/3/
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 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>