i know it is pure semantic way
<form action="" method="">
<fieldset>
<legend>Contact Form</legend>
<label for="name">Name</label>
<input name="name" id="name" size="20" />
</fieldset>
<form>
But some time for some design purpose it's not sufficient to get needed style. so my question is other than this purely semantic method
isn't this code is also semantic (after pure semantic method) because form is a group of ordered fields which we fill one by one
ol {
list-style: none;
padding-left: 0;
}
<form action="" method="">
<fieldset>
<legend>Contact Form</legend>
<ol>
<li>
<label for="name">Name</label>
<input name="name" id="name" size="20" />
</li>
<li>
<label for="email">Email</label>
<input name="email" id="email" size="20" />
</li>
<li>
<label for=" Choices"> Choices (radio)</label>
<input type="radio" name=" Choice" /> Choice 1
<input type="radio" name=" Choice" /> Choice 2
<input type="radio" name=" Choice" /> Choice 3
</li>
<li>
<label for=" Choices3"> Choices (checkbox)</label>
<input type="checkbox" name=" Choice3" /> Choice 1
<input type="checkbox" name=" Choice3" /> Choice 2
<input type="checkbox" name=" Choice3" /> Choice 3
</li>
<li>
<label for="dropdown">Question</label>
<select id="dropdown">
<optgroup label="Group of Options">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
</select>
</li>
<li>
<label for="message">Message</label><br />
<textarea name="message"rows="12" cols="36"></textarea>
</li>
<li><input type="submit" value="send it" /></li>
</ol>
</fieldset>
</form>
If the form fields are meant to be completed in a particular order, then yes, I would say an ordered list is semantically meaningful for separating form elements.
If you want to add extra elements to allow more layout styling hooks from CSS, but which have no semantic content in themselves, use <div> (or <span> for inline). That's what they're there for.
You should use a definition list, that way your label / input are linked to one another through the for and id, but also through the definition title (label) and definition description (input).
That way you can do some good styling or hide some stuff if needed.
Related
I would like to know how to include a require for different element like checkbox, select ... not alone but inside a group element
I tried this, but it doesn't seem to work as expected
<div class="form-group aria-required="true">
<div class="radio">
<ul class="list-unstyled">
<li>
<input type="radio" name="radio1">
<input type="radio" name="radio2">
<input type="radio" name="radio3">
</li>
</ul>
</div>
</div>
The aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. This attribute can be used with any typical HTML form element; it is not limited to elements that have an ARIA role assigned.
HTML5 now has the required attribute, but aria-required is still useful for user agents that do not yet support HTML5.
Used in ARIA roles
Combobox
Gridcell
Listbox
Radiogroup
Spinbutton
Textbox
Tree
A simple form
<form action="post">
<label for="firstName">First name:</label>
<input id="firstName" type="text" aria-required="true" />
<br/>
<label for="lastName">Last name:</label>
<input id="lastName" type="text" aria-required="true" />
<br/>
<label for="streetAddress">Street address:</label>
<input id="streetAddress" type="text" />
</form>
Working Examples:
Link
I want to make a contact form for my website. i want to make it without using a table. How do I do that? I was looking at div tags because I want to style it with CSS. I want to give it a length and width. I want to place it in a main div tag but I am not sure how I do so. Please help me. How do I do it?
Try searching on Google: "contact form CSS".
You will get so many examples with the code provided that you will get lost :D
Have a look on these two.
css-tricks.com
net.tutsplus.com
Hope this helps
I've used something similar to this-
<form id="contact-form" name="contact-form" action="/contact-us" method="post">
<div class="form-col">
<input type="text" name="Requester.FirstName" class="styled" placeholder="First Name">
<input type="text" name="Requester.LastName" class="styled" placeholder="Last Name">
<div class="selector fixedWidth">
<span>Subject</span>
<select name="Subject" class="styled">
<option value="">Subject</option>
<option value="custserv">Customer Service</option>
<option value="vendor">Vendor</option>
<option value="other">Other</option>
</select>
</div>
<textarea name="message" class="styled"></textarea>
</div>
<div class="form-col">
<input type="text" name="Requester.ContactInfo.Email" class="styled" placeholder="Email Address">
<input type="text" name="Requester.ContactInfo.Phone" class="styled" placeholder="Phone Number">
<span class="question">How do you prefer to be contacted?</span>
<label for="contact-method-phone">
<div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="HomePhone" class="styled"></span></div>Phone
</label>
<label for="contact-method-email">
<div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="Email" class="styled"></span></div>Email
</label>
<input type="text" name="Address.StreetAddress1" class="styled" placeholder="Address">
<input type="text" name="Address.StreetAddress1" class="styled">
<input type="submit" value="CONTACT US" class="m-form-button" name="CONTACT US">
</div>
</form>
And I try to follow SMACSS when styling
I am writing an HTML5 page at the moment, I'm having an issue switching format from using br for line spacing to line-height, padding, or margin (whichever is easier). Everything is inside of a form and fieldset tag I do not want every line to be on their own, just some. Some text I do want next to each other because I am making a form that has radio buttons and check boxes. But instead of using br tags how I can switch that out to line-height, padding, or margin in css.
<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>
....
Try to use a fieldset for each group of radios so you can control them more precisely, put margin only around your group and etc.
You can use labels and span around the label/input groups, so you can control them better.
<span>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</span>
Also if you use a class specific for your input, you can make it display in block, like this:
input.block {
display: block;
}
then if you put this class block on your input the label will stay in another line...
For a bigger picture see this fiddle:
http://jsfiddle.net/BxwNL/1/
Update: another solution according to cinnamon comment
You can also use a list for your items, but it would make sense if you grouped them according to their properties, like a list for the colours, a list for the types...
The usage would be like:
<ul>
<li>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</li>
<li>
<label for="name2">Value2</label>
<input type="checkbox" name="name2" value="2"/>
</li>
</ul>
Fiddle example for the list solution:
http://jsfiddle.net/BxwNL/2/
Is have about 20 label/input pairs on a page that use JS to give them unique styling. For this to work they must have matching id's on each pair.
This is the way the I would like the HTML to be formatted:
<p class="radioBtn">
<label for="business00"></label>
<input id="business00" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">
<label for="private00"></label>
<input id="private00" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">
<label for="business01"></label>
<input id="business01" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">
<label for="private01"></label>
<input id="private01" type="radio" name="radioBtn" value="" />
</p>
and so on.
Can this be achieved using ASP.NET? Many thanks in advance.
I think this will answer your question.
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.