I've styled a domain search form with CSS and DIV tags, but it's not W3C compliant since I separated the form tags. How can I get around this and still be able to style each component of the form?
<div class="reg-domain-txt">
<span>Register Your Domain Name Today!</span>
</div>
<div class="checkerform">
<form action="https://www.xhostcompanyx.com/clients/domainchecker.php" method="post">
<input type="hidden" name="token" value="xxxxxxxxx" />
<input type="hidden" name="direct" value="true" />
<input class="inputbox" type="text" name="domain" size="29" />
</div>
<div class="tldboxlist">
<select class="tldbox" name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.biz</option>
<option>.us</option>
<option>.info</option>
<option>.mobi</option>
<option>.me</option>
<option>.co</option>
<option>.tv</option>
<option>.pro</option>
</select>
</div>
<div class="domaincheckbutton">
<input class="domainbutton" type="submit" value="Search" />
</form>
</div>
Just put the start and end form tags outside of the divs.
Please explain why this will prevent you from styling?
The code you’ve posted isn’t valid because you’ve opened a <div> tag, then opened a <form> tag, then closed the <div> tag before closing the <form> tag. You can’t do that with any tags in HTML.
Here’s your HTML, corrected and indented — indentation really helps make these kinds of HTML errors more obvious:
<div class="reg-domain-txt">
<span>Register Your Domain Name Today!</span>
</div>
<div class="checkerform">
<form action="https://www.xhostcompanyx.com/clients/domainchecker.php" method="post">
<input type="hidden" name="token" value="xxxxxxxxx" />
<input type="hidden" name="direct" value="true" />
<input class="inputbox" type="text" name="domain" size="29" />
<div class="tldboxlist">
<select class="tldbox" name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.biz</option>
<option>.us</option>
<option>.info</option>
<option>.mobi</option>
<option>.me</option>
<option>.co</option>
<option>.tv</option>
<option>.pro</option>
</select>
</div>
<div class="domaincheckbutton">
<input class="domainbutton" type="submit" value="Search" />
</div>
</form>
</div>
I would remove the three DIVs. They are not necessary for content or styling. If you need to group together form elements, you should use the FIELDSET tag. Also, if you need to position the entire form, you can give the form an ID or a Class.
Related
I am trying to add a bootstrap form in asp.net content page(.aspx). but it gives me an error regarding "Element form must not be nested with in a element form"
But i want to use the form element for a Login purpose in the page.
<div class="container">
<h2>Vertical (basic) form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<%-- --%>
</asp:Content>
Thanks in Advance
All asp webpages are already in a form, so you don't need the form tag, all you can do is instead of using, you can see the form tags at your main master page <form> you can use <div class="form"> hope this helps also for the best result
you should use CssClass instead of class in asp tags when adding the styling classes. e.g <asp:TextBox ID="TextBox14" runat="server" CssClass="form-control"></asp:TextBox>
you have simply use
<div class="container">
<h2>Vertical (basic) form</h2>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
The message is clear.
Remove the extra form tags <form> and </form> from your code. Beside that your form did not post anywhere - use the asp.net form to post to code behind, you do not need other form there.
My Grails (2.4.2) app has a simple form on one of its GSPs, that uses Bootstrap for styling:
<!DOCTYPE html>
<html>
<head>
<!-- Head omitted for brevity. -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to MyApp.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group" style="text-align: left;">Need help?</div>
</form>
</div>
</div>
</div>
</body>
</html>
When the user clicks the "Sign in" button, the FizzController#signin() action should be executed. I am tempted to change the GSP form to something like:
<g:form controller="fizz" action="signin">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<g:submitButton name="submit" value="Sign in" />
<div class="form-group" style="text-align: left;">Need help?</div>
</g:form>
But then I lose the form role="form" declaration and the styling (btn form-control btn-lg btn-success) classes on the button.
How can I merge <g:form> and <g:submitButton> with my Bootstrap stylings?
There is nothing keeping you from adding additional attributes and values to the output from the standard <g:> tag library.
For example:
<g:form controller="fizz" action="signin" role="form" class="someClass">
The above will include the two additional attributes role and class as they appear. This holds true for almost all (if not all) of the standard tags in Grails.
If you want to look and see how this is actually implemented in the outputAttributes, you can review the source code for the built in forms tag library.
Applying styles to a dynamically generated page can be difficult coming from styling static HTML pages. A problem I ran into was correctly applying styles to my rendered templates in Grails. If your project uses a rendered template to display a form remember to apply the Bootstrap .form class to the parent view's <g:form> tag as noted in #Joshua Moore's answer.
Styles would look similar to:
<g:form id='myId' class='form-horizontal'>
<g:render template='myFormTemplate' model='yourModelInformationHere'/>
</g:form>
Done this way, the .form-group class can be used on the underlying template and since the .form-horizontal class is declared already the rendered page will be correct.
I cannot figure out for the life of my why this jquery mobile panel won't render with the same look and feel of the jquery mobile theme used in the application.
The panel is loading on the same page as the rest of my jquery mobile page so the jquery mobile css files and jquery js files are all referenced and working on other parts of the page.
What am I missing within my layout?
thanks
<div data-role="page" id="map_page">
<div data-role="panel" id="transitLayersPage" data-position="right" data-display="overlay">
<div data-role="header">
<h1>Routes</h1>
</div>
<div data-role="controlgroup">
<div id="checkboxes">
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(0)" />
<label>Routes 1</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(1)" />
<label>Routes 2</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(2)" />
<label>Routes 3</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(3)" />
<label>Routes 4</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(4)" />
<label>Routes 5</label>
<input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(5)" />
<label>Routes 6a</label>
<input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(6)" />
<label>Routes 6b</label>
</div>
Close panel
</div>
</div>
You forgot to add for attribute to label. Moreover, you should not use duplicate id for checkbox, each checkbox must have a unique id.
<input type="checkbox" id="foo">
<label for="foo">bar</label>
Demo
When label tag should be used over span or dev in form?
Example:
option1-span:
<form action="">
<span>Name:</span><input type="text">
<input type="submit" />
</form>
option2-label:
<form action="">
<label>Name:</label><input type="text">
<input type="submit" />
</form>
option3-div:
<form action="">
<div style="display:inline;">Name:</div><input type="text">
<input type="submit" />
</form>
Thanks
This is what label tags are for:
<form action="">
<label for="txt">Name:</label><input type="text" id="txt" name="txt" />
<input type="submit" />
</form>
Then clicking on the label will focus on the input element.
The label tag is primarily used along with the for attribute. This aids in web accessibility of forms. For example
<form>
<label for="firstName">First name:</label>
<input type="text" name="firstName" value=""/>
</form>
By using the for tag, we can essentially associate the text "First Name:" with the input field having the name = "firstName".
Aside from that it has other attributes allowed but the span is more regularly used for styling markup.
I'm roughing a layout together and doing some browser testing. Never came across this issue before, check out the contact form in the footer of this page
http://staging.terrilynn.com/fundraising/
There is a div with a width of 298px floated to the right that comes first in the source order. It is followed by several other divs, each with their child form elements floated left.
The div's that should appear to the left of right-floated message div are disappearing.
Page displays correctly in firefox. Any help would be appreciated.
<div id='footer-contact-form'>
<h1>Request Information <span class='note'>(all fields required)</span></h1>
<form class="monkForm" method="post" action="http://my.ekklesia360.com/FormBuilder/handleSubmit.php" id="footer-info-request">
<fieldset>
<legend>Footer Info Request</legend>
<div class="textarea required" id="w2376">
<p class="data">
<label for="area_2376">Message</label>
<textarea id="area_2376" name="e_2376" rows="5" cols="20"></textarea>
</p>
</div>
<div class="text required" id="w2377">
<p class="data">
<label for="text_2377">Name</label>
<input id="text_2377" type="text" name="e_2377" value="" />
</p>
</div>
<div class="text required" id="w2378">
<p class="data">
<label for="text_2378">Phone</label>
<input id="text_2378" type="text" name="e_2378" value="" />
</p></div>
<div class="text" id="w2379">
<p class="data">
<label for="text_2379">Email</label>
<input id="text_2379" type="text" name="e_2379" value="" />
</p>
</div>
<p id="formsubmit"><input type="submit" name="submit" value="Send" /></p>
<input type="hidden" name="token" value="8143f99c1d01b4d1207dbe7860e5586d" />
<input type="hidden" name="SITEID" value="2185" />
<input type="hidden" name="cpBID" value="367780" />
<input type="hidden" name="formslug" value="footer-info-request" />
<input type="hidden" name="CMSCODE" value="EKK" />
<input type="hidden" name="fkey" value="" />
</fieldset>
</form>
</div><!-- #footer-contact-form -->
I guess I found the problem:
screen.css (line 382)
#footer-contact-form div {
margin:0 300px 10px 0;
overflow:hidden;
}
"overflow:hidden" causes the problem.
Have you tried not floating the <p> elements to the left? Why are you actually doing this? It isn't required in the current layout.
Wow that worked!
I was using overflow:hidden to force the div to contain the floated label and input elements.
But really the float on the input elements wasn't necessary.
Thanks you all very much.