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.
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
<form className="pure-form">
<fieldset>
<input ref="email" type="email" placeholder="Email"
value={this.state.emailInput}
onChange={this.handleChange}
/>
<input ref="password" type="password" placeholder="Password"
value={this.state.passwordInput}
onChange={this.handleChange}
/>
<label htmlFor="remember">
<input ref="remember" id="remember" type="checkbox" /> Remember me?
</label>
<button onClick={this.handleLoginClick} type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
I just copy-pasted the example form from Purecss.io.
How come everything sticks together? Why do they have no margin?
You have the classes incorrectly added:
<form className="pure-form">
should be
<form class="pure-form">
...and so on.
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<form class="pure-form">
<fieldset>
<input red="email" type="email" placeholder="Email" />
<input ref="password" type="password" placeholder="Password" />
<label htmlFor="remember">
<input ref="remember" id="remember" type="checkbox" />Remember me?
</label>
<button onClick={this.handleLoginClick} type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
Paulie_D is correct if you want to call any css class on any html tag then you need to follow the syntax like this
<tag class="classname"></tag>
Eg:
<form class="pure-form">
form elements goes here
</form>
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
Say I have the following mark up:
<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>
The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?
You don't need CSS. Wrap your input in a label and put the text last.
<label><input type="radio" name="name" id="name"/>Name:</label>
Is that still semantic for you?
Or you could try the float.
Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.
To answer your question: just do it in the order you want to display it
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
fiddle http://jsfiddle.net/Jm2JR/1/..
write like this:
input{
float:left;
}
Check this http://jsfiddle.net/3cLRg/
<label for="name" style="float:right;">Name:</label>
try this:
<label style="position:relative; left:100px;" for="name">Name:</label>
<input type="radio" name="name" id="name"/>
2nd approach is :
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
Hi you just define your input tag as like that
<label>Name:
<input type="radio" name="name" id="name"/></label>
<br />
<label>
<input type="radio" name="name" id="name"/> Name
</label>
Live demo http://jsfiddle.net/rohitazad/bhBQn/1/
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.