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
Related
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 1 year ago.
Improve this question
Below are two HTML snippets to let the user choose a language for the page:
one uses <select> and <option>s,
the other uses a <div> and alternated <input>/<label>s.
What I plan to do is pick one of those (or a better one, if one exists) and use CSS to customize the appearance of it such that something like the following would appear at the top right of the page, i.e. all alternatives should be show at the same time all the time on the page.¹
I any of 1 and 2 which is to be objectively preferred over the other?
Are there any pro and cons of 1 vs 2?
<select name="language" id="language" value="ENG">
<option>ITA</option>
<option selected="selected">ENG</option>
<option>FRE</option>
</select>
<div class="language">
<input type="radio" id="italian" name="fav_language" value="ita">
<label for="italian">Italiano</label><br>
<input type="radio" id="english" name="fav_language" value="eng" checked="checked">
<label for="english">English</label><br>
<input type="radio" id="french" name="fav_language" value="fre">
<label for="french">Français</label><br>
<div>
¹ I've obtained this static image via a <ul> with 3 <svg>s inside a corresponding <li>, so I haven't bothered adding something like an external shadow to mark the selected language, but I'd do it at some point.
As you want to freely style your language selector by means of showing all options at the same time through flag images I think none of the above options are the best choice. There's no need to get complicated. Try a div and a links solution to better fit your goal.
Something like </div><ul class="languages"><li class="nav-item">English /a></li><li class="nav-item"><a href="#french">french</li></ul>
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.
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
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.