I changed the type of Price to number but it has placed the label to the left, how can I correct this?
http://i.imgur.com/73JOIlA.png
End Date* (YYYY-MM-DD) <input type="text" name="eDate"><br>
Price* <input type="number" name="price"><br>
You can do a couple of things. Some more simple than others.
I know I've fixed this in the past by simply using <br>
soo.. Price*<br> <input type="number" name="price"><br>
Let me know if that doesn't work, I can suggest other solutions, like using width, display: block and floats etc.
You could go with either floating, expanding the width of the input field or using a label tag to then put that display:block; like for example this:
label{display:block}
<form>
<label for="eDate">End Date* (YYYY-MM-DD)</label>
<input type="text" name="eDate"/>
<label for="price">Price*</label>
<input type="number" name="price"/>
</form>
This would be the way I would handle it, but feel free to ask additional information if you'd require it!
Related
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
Trying to get the input box's to line up with their text, the second input box drops a line and throws everything off when float: right is on. I'd like to know why it skipping a line and how to fix it please. Thank you.
tried rearranging, tried clearfix.
https://jsfiddle.net/dpq1fzcj/4/
<section>
<h1> </h1>
<div id="controls" class="controls">
<form id="add-book-form">
Title:
<input type="text" name="title" required /><br>
Author:
<input type="text" name="author" required /><br>
Pages:
<input type="text" name="pages" type="number" required /><br>
Read:
<input type="checkbox" name="read" /><br>
<input type="submit" id="add-book-btn" value="Add"> <button onclick="hideForm()">nvm</button>
</form>
<button onclick="addBookForm()">Add Book</button>
</div>
</section>
You have several problems.
First, you're floating right the input fields and leaving labels to figure out what to do. First label ends up ok, second up breaks the flow because it fits in the same row as the input field since the text line-height is smaller than height of the input field. But the input field doesnt fit in that same line as its label.
Second, you're using <br> for breakings instead of wrapping everything in some kind of a block element.
Third, you're not using label tag at all.
So, to fix this:
Add labels (and for property in labels)
Float labels left and inputs right.
Add div around every label/input pair and add clearfix to it.
Lose <br> altogether.
I want to make it possible for visitors of my website to add fraction in a input text field.
So if they push the '/' or a specific button on my website, in the text field a fraction line should popup and a number can be added in the numerator and denominator.
The same I would do for the exponent, when push the '^' or a specific button.
[edit] Maybe my question wasn't clear. I tried to create it myself, but I have really no idea how to start. I can create it in two separated fields, but I want the visitor to choose if he has to add a fraction.
I saw the solution in a flash website, but I thought with the introduction of html 5, flash would disappear.
This is the best solution i can come up. I dont really know how you would make a fraction like this in an input field.
Hope it helps
$('#input-main').change(function(){
$('.main').html($('#input-main').val());
})
$('#input-denom').change(function(){
$('.denom').html($('#input-denom').val());
})
$('#input-num').change(function(){
$('.num').html($('#input-num').val());
})
p {display: inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable for="input-main">Number</lable>
<input id="input-main" type="text" value="">
<lable for="input-num">Numerator</lable>
<input id="input-num" type="text" value="">
<lable for="input-denom">Denominator</lable>
<input id="input-denom" type="text" value="">
<p class="main" >1</p><sup class="num">1</sup>⁄<sub class="denom">2</sub>
I am new to html. This is a very simple question. I am dealing with forms. I want all the input text fields to start at the same x-axis point regardless of the size of the label. I want the labels to be left aligned and all the text fields to start at the same x-axis point.I don't want to use tables or " ". Is there a simple solution or Should I use separate divisions for labels and input fields? I don't mind using css but I prefer it to be simple.
<form>
<label>Name</label>
<input type="text" name="n1"><br>
<label>Phone No.</label>
<input type="text" name="p1">
</form>
I want "n1" and "p1" to start at the same x-axis point.
Add this style to your page:
label{
display:inline-block;
min-width:80px
}
Check here Fiddle
You can use paragraph tags for every input element.
<p><input type="text" name="your name"></p>
<p><input type="email" name="your email"></p>
I am working on an assignment and am a little lost. The question states:
Create a label element with the text Username. Within the label element, insert
an input box for the username field. Make the field required and add the title Supply
your username
Here is what I have. I am mainly confused on the title portion. Any help is greatly appreciated, and feel free to correct me on the other parts. Thank you
<form id="survey" name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS"
<label>
Username
<input id="username">
required="required"
</label>
</fieldset>
</form>
You just need to add a title attribute on the input field. Also the label tag can stay on it's own, which leaves to:
<form id="survey"
name="survey"
action="www.sblogger/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<label>Username</label>
<input id="username"
title="Supply your username"
required>
</fieldset>
</form>
The assignment is not well-defined, since it does not say what kind of a title should be included. It may refer to an advisory title that may be presented to user in some situations (e.g., on mouseover), as assumed in #Jeffrey’s answer. It may also refer to text that appears inside the input box when it is empty, in which case you would use the placeholder attribute. It can also refer to visible text before the input box; this would be the most reasonable setup. Even then, there are several alternatives. It could be just text before the label and the input box, or it could be wrapped in a heading element, or even a legend for a fieldset. The following example is based on the wild assumption that such a legend is desired (which might be a wrong guess if you have actually been told to use the fieldset element, as you are using, although there is no reason to use it in a simple case like this).
<form id="survey" name="survey"
action="http://www.example.com/cgi-bin/subcomments"
method="post">
<fieldset id="commentFS">
<legend>Supply your username</legend>
<label>
Username
<input id="username" name="username"
required="required">
</label>
</fieldset>
<input type="submit" value="Submit">
</form>
Notes: The attribute required="required" (or just required unless you have been told to use XHTML syntax) must appear inside the <input ...> element, not after it. And the input element needs a name attribute, otherwise the data in it will not be sent at all to the server.