Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Why is div written before an id in the first example? (please look below) and not written before class="my-form"> in the second example (please look below)? sometimes we use div and sometimes not. Can you give me the reason?
First example:
<div id="sidebar">
<p>Lorem ipsum dolor sit amet </p>
</div>
Second example:
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<Input type="text" name="name">
</div>
<div class="form-group">
<label> Email </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="">
</form>
You are writing HTML here.
In HTML you use tags to declare the elements of your document.
When you want to specify a first-order heading u can use the tag h1 like so:
<h1>My Headline</h1>
And that will be rendered as a heading by your browser.
So what about that div?
A div is just another html element, that describes a block on your page.
You can use divs for grouping and structuring other elements.
What about class?
In HTML you can use attributes to declare additional properties for your elements. One of those attributes is the class-attribute. It is used to tell your browser, which CSS-class(es) to use for styling an element.
Here I made up a css-class with the name "red-color" that assigns red color to its elements. In the html-code I use the class-attribute to use that style-class for the second heading.
.red-color {
color: red;
}
<h1>Default style heading</h1>
<h1 class="red-color">Custom style-class heading</h1>
You never use any attribute without an element (tag).
What about the intensions of your instructor?
Nobody knows, but you can ask your instructor.
Related
Some form elements in a form may require text to explain the function of said element. I'm thinking of encapsulating this text in a paragraph element, as follows,
label p {
margin-top: -1px;
font-size: smaller;
}
<div class="form-group">
<label for="form-input-1">Label Text
<p>Label explainer/help text</p>
</label>
<input id="form-input-1" />
</div>
My question is: is the <p> element the most semantic element for this use? In my opinion, the label sub-text is a type of sub-title and one could argue that it may call for a <h*> element. But, these are often used for outlines, and I don't believe this would be super semantic here. Would a <span>, make sense here, as these may be used to mark off parts of inline flow elements?
Please, share your thoughts!
<label> elements can only contain phrasing content, which means they can't contain headings or paragraph elements, which are flow content.
Additionally, the MDN Docs note that headings should not be used within labels because that "interferes with many kinds of assistive technologies".
If additional form field instructions are needed beyond what would reasonably fit within a label, you should use a separate element, outside of the label—and tie it to the input using the aria-describedby attribute, as outlined on the W3C's Web Accessibility Tutorial on Form Instructions.
Here's an example of that approach:
form {
display: grid;
grid-gap: 0.5rem;
padding: 0.5rem;
}
<form>
<label for="input">Label Text</label>
<span id="instructions">Additional instructions lorem ipsum</span>
<input id="input" aria-describedby="instructions" type="text">
</form>
In complex forms there are mulitple sections, headings, hints, helper texts an so on used as explanation. So there are multiple ways to add descriptions and helper texts to a form:
<span> is the simplest form. Add it to the label-element.
<fieldset> with <legend> wraps fields together and adds a descripition.
<section> can give additional structure and information to a form.
<p> can be used to add addtional information i.e. to the whole form or a form-section
<div> is used by Google in Maerial Design for a text field helper line
Often done but NOT to be used for farer explanation should be texts in placeholders.
In your example I believe a span within the labelshould be a good solution which will match the semantic.
ADDITOINAL INFORMATION
Complex HTML code example from MDN:
<form method="post">
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="A">
Ace
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="K" >
King
</label>
</li>
<li>
<label for="title_3">
<input type="radio" id="title_3" name="title" value="Q">
Queen
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="tel" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/dd/yyyy</em>
</label>
<input type="date" id="date" name="expiration">
</p>
</section>
<section>
<p> <button type="submit">Validate the payment</button> </p>
</section>
</form>
Link to see MDN form live:
https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html
Link to wider MDN explanations:
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form#common_html_structures_used_with_forms*
Link to example Google Material Design:
https://material.io/develop/web/components/input-controls/text-field/helper-text
There doesn't seem to be any definitive answer or resource so you can only get opinions. Here's mine:
I'd start by thinking about how to markup the whole form. I think the semantic form style described in MDN article is a pretty good place to start. Especially the part that a form is logically a list of form controls so you should have <ul> and <li> elements wrapping the controls in semantic order. However, I think it has one problematic part where it uses logically markup like
<label><input>text</label>
for radio buttons, but
<label>text<input></label>
for text inputs. I'd highly prefer that the markup order doesn't change depending on the input type (checkbox/radio button vs text/email/password). To do that in practice, you probably want to always use markup like
<li class="checkbox">
<label for=id1>text</label>
<input id=id1>
</li>
which you can then style by using e.g. li.checkbox { display: flex; ... } and reorder the label and input visually as needed. Obviously the class is needed only for styling but it is not needed for semantics. If browsers ever implement :has() then there would be no need for a class at all.
As for the help text for the input, in theory, you would want to use
<li class="checkbox">
<label for=id1>text</label>
<input id=id1>
<label for=id1 class=help>help content here</label>
</li>
because by spec it should be possible to attach multiple labels to a single input. However, as far as I know, this doesn't work in practice with the software that's commonly used by blind people needing accessibility aids.
As such, the next question is how do you think this help text should be used by all the following groups?
Users with vision without JavaScript support. (Note that this group includes most search engines.)
Blind persons without JavaScript support.
Users with vision with JavaScript support. (Note that this group includes some search engines.)
As far as I know, there's no good answer to cater for all the 3 groups perfectly. Note that for practical support for a yet another group "Blind persons with JavaScript support" you can use any markup you want and use ARIA attributes to make it accessible. Overall, the best I can think of is as follows:
<li class="checkbox">
<label for=id1>text</label>
<input id=id1 aria-describedby=id2>
<aside id=id2>help content here</aside>
</li>
That should be good enough to attach the help content to the input for accessibility tools, the help content is semantically additional content so <aside> should be okay for both blind and visual users and you can use CSS only to make the <aside> visible only when the input is focused. Also note that <aside> allows any content for help, incuding videos in iframes, not just text. Of course, if you need user to click within the <aside> element you cannot use input:focus to toggle the element visible but you need to use some kind of JavaScript support. Exact details depend on which group you want to cater for most and if you want to have the help text available to all groups.
This markup also contains all the information you need to wrangle it as needed by JavaScript. For some non-JavaScript styling options you might want to wrap the label and input in some wrapper element so that you can position those as a group separate from <aside> element. In that case markup like
<li class="checkbox">
<div>
<label for=id1>text</label>
<input id=id1 aria-describedby=id2>
</div>
<aside id=id2>help content here</aside>
</li>
could be a good option. You can target that classless <div> element by selector form li.checkbox>div if needed. One could then use e.g. display:grid or subgrid for the li.checkbox and e.g. display:flex for the li.checkbox>div to position everything nicely. However, if you do that, you cannot nicely toggle the visibility of the help text simply by using style like input:not(:focus) + aside { display: none; }. I think you can survive without the wrapper <div> element if you use display:grid for li.checkbox because that allows positioning stuff in 2D unlike flex.
And if you need to support users with vision but without support for CSS, then I don't have a good solution. Using the above mentioned semantic list markup results in bullet points in addition to form inputs which could look pretty messy for non-CSS users.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How can I make a radio-inline group of radiobuttons to align in the same line without stacking the class?
http://codepen.io/pablocgdev/pen/RKroZq
I was able to put the radiobuttons in the same line in your example just by adding the following css code:
.funkyradio-success {
display: inline-block;
}
Since your radiobuttons are inside a div, you need to make sure they don't have display:block (their default value) so that they can be rendered in the same row.
<div class="funkyradio">
<label class="radio-inline"> <p>Output</p>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio6" />
<label for="radio6">P123F</label>
</div>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio7" />
<label for="radio7">ASDF</label>
</label>
</div>
If you add the style display: inline to your div tags like I did, that should get you to the desired result. I used inline css but you might want to add it to your css file. display: inline will use only the amount of space necessary to hold your element.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'd like to have a login, Password and Submit all on the same line.
<p><input type="text" name="login" value="" placeholder="Username or Email"><input type="password" value="" placeholder="Password"></p><p class="submit"><input type="submit" name="commit" value="Login"></p>
You can always use span to add different classes within one paragraph tag
For example:
<p><span class="1">First Item</span> <span class="2">Second Item</span></p>
however, it sounds like you are looking to use input fields in a form that needs to submit data. In this case all you have to do is this:
https://jsfiddle.net/fNPvf/25012/
You can make HTML elements in-inline (on the same line) by adding the display css attribute:
display:inline-block;
< input > elements default to inline-block display. But < p > elements default to block display; which means they have a break-line after the element.
However, given that you seem to be new to HTML and CSS, I would highly suggest you check out Boostrap. It's a framework that makes website styling and templates easier. This is why in your source the < p > surrounding the two inputs breaks into a new line before the submit input is rendered.
See this snippet from their documentation of how to make an in-line login form. Run this snippet in full page mode to see how it's works in-line.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When I need place a title, I use h-number tags. But in case that I need a title in a label, for instance, should I use h-number, too?
Example:
<label ...>
<h1>Username</h1>
<input ... />
</label>
There is no need to do so. Just use styles
label,
label span {font-size: 20px; font-weight: bold}
<label for="username-input">Username</label>
<input type="text" name="username" id="username-input">
<!-- Or, if you want the input inside of the label -->
<label>
<span>Username</span>
<input type="text" name="username">
</label>
Generally, you do not want to put block elements (such as heading tags) inside of inline elements (such as a label). However, you can always alter their display style.
Another thing to remember is that heading tags should be reserved for headings. Label tags should be reserved for labels. In your case, the h1 tag inside of the label doesn't "make sense" since it is not the heading of the page. You would want to use something less prominent, such as a span, but make it look how you want.
A label should be used as a caption and does not require <h1> <h2> etc. Valid markup would look like
<label>
Username
<input />
</label>
Feel free to move the <input /> outside of the <label /> by using the for= attribute, or keep the <input /> inside your label as you have it.
<label for="username">Username</label>
<input id="username" type="text" />
See more here
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
For example. here is simple form (that I often use):
<form class="login">
<input class="login_username" type="text" value="username"/>
<input class="login_password" type="text" value="password"/>
<input type="submit" value="Login"/>
</form>
But I read some books, and see some of my friends often do:
<form class="login">
<div class="login_username">
<input class="login_input" type="text" value="username"/>
</div>
<div class="login_password">
<input class="login_password" type="text" value="password"/>
</div>
<input type="submit" value="Login"/>
</form>
The difference is: they often wrap all components inside a div tag, and then assign its a class name (although inside div tag has only one component). I don't know which advantages when they do this.
Thanks :)
WHATWG: 4.10.1.1 Writing a form's user interface
Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a text control. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:
<form>
<p><label>Customer name: <input></label></p>
</form>
WAI: Forms > Grouping Controls
Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify... In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group...
<div role="group" aria-labelledby="shipping_head">
<div id="shipping_head">Shipping Address:</div>
<div>
<label for="shipping_name">
<span class="visuallyhidden">Shipping </span>Name:
</label><br>
<input type="text" name="shipping_name" id="shipping_name">
</div>
[…]
</div>
<div role="group" aria-labelledby="billing_head">
<div id="billing_head">Billing Address:</div>
<div>
<label for="billing_name">
<span class="visuallyhidden">Billing </span>Name:
</label><br>
<input type="text" name="billing_name" id="billing_name">
</div>
[…]
</div>
It also recommends to use <fieldset> and <legend> elements. <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.
Other than those, Styling and Manipulating are the main reasons for lots of developers.
It really depends what you want to do.
Generally, the more layers you wrap around some other elements, the more flexibility you have if you want to create some effect with CSS and Javascript.
But it could just be a matter of preference.
In short, unless you have a reason, it makes little difference whether you will wrap your key elements, the < input >s in this case, in some other tag.
It will mainly be for styling forms with CSS and potentially using some of the classes for Javascript hooks.