Is it possible by default make all the fileds in a div class as required fileds. I have a form and inside the form i have a div class.. why i am using the div class is by defalut the div class is hidden and when i clicked on some check box it will be visible. SO i need all the elements in the div class should be required filed. I was trying required="required" on all the elements but it is not working. Any one has idea?
Here is my html
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Any help will be appreciated
Syntax highlighting - probably the greatest tool at any coder's disposal. (It's even on Stack Overflow!)
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name><br>
<label> age </label>
<input required="required type="text" name="age><br>
</div>
</form>
Attributes are red and their values are blue. So it should look more like this:
<div class="downtime" id="downtime" style="display: none" >
<label> name </label>
<input required="required" type="text" name="name" /><br>
<label> age </label>
<input required="required" type="text" name="age" /><br>
</div>
</form>
and FYI the required attribute doesn't need a value:
<input type="text" name="age" required />
Change your code as follow:
<input type="text" name="name" required>
and
<input name="age" required>
Just writing "required" make your fields as required. It works only in HTML5. So put it before html tag starts.
if you want to use html5 you can do it with required(this only works on browsers that support html5), if not use a jquery plugin for validation like this:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Related
I want to know if this code is correct or not. Because a label tag in HTML should have an input tag as well. But the first line of code doesn't have any input with it.
For example:
I want to make this part of the form.
This is my code:
<label>Name:</label>
<br>
<div>
<label for="fname"></label>
<input type="text" id="fname" name="name" placeholder="First">
<label for="lname"></label>
<input type="text" id="lname" name="name" placeholder="Last">
</div>
I tried this in my code but the required function doesn't seem to work in my web page :
<div>
<label for="Username">Username: </label>
<input type="text" name="username" required>
</div>
For the "required" attribute to work, the <input> must be be wrapped in <form> ... </form> tags.
If the input box is located within a <form> tag as intended, then required will work correctly in all modern browsers. Demo:
<form>
<div>
<label for="Username">Username: </label>
<input type="text" name="username" id="Username" required>
</div>
<input type="submit" value="click to test"/>
</form>
Also for= on a label requires the target element to have an id with matching text before it's effective. It doesn't interact with the name attribute. I've added an id in the demo.
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
I'm trying to figure out how to mark up some code using WCAG standards, but it's a little complicated when I run into this situation:
<div class="form-group">
<label>Entry Method</label>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</div>
What do I do with the first "label"? How do I use "for" and "id" in this scenario?
A label accompanies a single form field, rather than a group of fields. Grouping form fields is achieved using a fieldset instead of a div, which is accompanied by a legend instead of a label:
<fieldset class="form-group">
<legend>Entry Method</legend>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</fieldset>
See H71 of WCAG 2.0 for a detailed write-up.
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.