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.
Related
I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?
<div id="viewport"></div>
<div class="form">
<h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
<form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
<input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
<button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
</form>
</div>
You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.
just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:
<div class="form" style="z-index: 1000 !important;">
In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.
In my case i used Reactjs app for using
<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />
You can see i put value="" so it is blank. That's why it was not working.
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 learning how to make forms and made this for practice. When I have labels out it and try to click into any of the form elements, it selects the previous one. For example, if I click into the password input box, it sends me to the username input box. When I remove the labels the bug goes away. I'm pretty sure labels aren't supposed to do this. The console isn't showing any errors so I'm confused to why this is acting up.
Here is my code:
<form action="">
<fieldset>
<label>username<label>
<input type="text" id="userInput"/>
<label>password<label>
<input type="password" id="passwordInput"/>
<label>Hidden<label>
<input type="hidden" id="hiddenInput" value="I can't tell you"/>
<label>Text Area<label>
<textArea id="areaInput" rows="10" cols="40">
This is a big area with lots of text.
</textArea>
<input type="button" onClick="" value="submit"/>
<fieldset>
<form>
Looks like you are not closing your label tags, so you are making another label. You need to close the <label> by using </label> - just a typo!
You're not closing out your <label> tag. Use the / slash on the closing tag:
<label>username</label>
I have a simple form with two hidden inputs that is causing extra white space in Firefox. I've been in trouble with this for few days.
<form name="DemoForm" method="get">
<input type="hidden" name="isposted" value="">
<input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
It is rendered in cell. After that, there is a div with content, but in firefox there is a extra white space above the div. Only in Firefox.
I try to fix this putting the form in a div with display:none, its elements in div with "dispay:none" and other things that I have found in the net, but nothing help...
Has anyone met this issue before?
I have fix this issue using div container with "display:none" but removing the "type:hidden" from each element.
The final code looks as follows:
<div style="display:none">
<form name="DemoForm" method="get">
<input name="isposted" value="">
<input value="2" id="SelectedTab" name="SelectedTab">
</form>
</div>
Sure, this could be useful for someone. :- ]
Try removing all white spaces and newline characters within the form, like this:
<form name="DemoForm" method="get"><input type="hidden" name="isposted" value=""><input type="hidden" value="2" id="SelectedTab" name="SelectedTab"></form>
Similar idea to gotqn.
Make data field intended to be hidden an ordinary text field.
Just "hide" the input field by making it the same background-color as the form background.
If you want to hide the field data, use a text color the same as the background.
If you want to display some message/number in it, use a text color that is contrastingly different.
Hello I try to align all my input to have a normal form! I can not make it fit together!!GRR Thanks for your help please...This is made 2 hours im lost my time on this simple thing.....
<form name="input" action="html_form_action.asp" method="get">
<div id="one">
<p><label>Prénom</label> <input type="text" id="Prénom"/></p>
<p><label>Nom</label> <input type="text" id="Nom" /></p>
<p><label>Mot de passe</label> <input type="text" id="Pass" /></p>
<p><label>E-mail</label> <input type="text" id="Mail" /></p>
</div>
<input type="submit" value="Submit" />
</form>
You can give your labels width, and text-align them to the right. To do that you have to make them inline-block elements.
See this fiddle
I guess you don't have to align them right. That's just a style I see a lot when people use a table to do this.
If you just want to make it line up without using a table you can just use some simple CSS:
label {
width: 120px; //however wide your longest label is
float: left;
}
then just take out the p tags and put line breaks after each input.
I suppose you mean tabular appearance for the form, in two columns, one for the label, another for the input field, with the second column aligned left, first column either left or (more readably perhaps) right. The most obvious and most robust way is to make it a table:
<table id="one">
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/>
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" />
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" />
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" />
</table>
Then style as desired in CSS, e.g. with td:first-child: text-align: right.
This causes the first column to be as wide as needed for the longest label. Other methods require a guess on the width, and this is not robust, as the width needed will depend on the font.
To anyone who then accuses you for “using tables for layout,” you can answer that this is a method that actually works and that there is no reason why a form like this could not be regarded as tabular data.
Not really sure what do you want to achieve.
But if you want to align the values input-ed into textbox. In the input tags , add :
style="text-align: right"
If you want to align all textbox to the right, I suggest you can re-format your form in a table.