I have made a form using HTML, this is the code:
<html>
<head>
<style>
.your-class input{
float:left;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label><b>aspect ratio:</b></label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label><b>value3:</b></label>
<input type="number" name="no3" min="0.25" step="any" placeholder="value3" required><br>
<input type="hidden" name="calculator_ok" value="ok">
<input type="submit" name="submit" value="add" style="background-color: BurlyWood"><br>
</form>
</body>
</html>
I want the symbol (/) to be between the two small boxes not after them, see the picture:
How should I edit the code to get that result?
The problem happens because of the "float: right" CSS rule; it is floating all the <inputs> to the left, and leaving everything else untouched.
A few options to make it work:
The float could be removed;
The slash could be placed inside a container and the CSS rule adjusted to apply to that container, too.
Well, you would have to turn all children into left floats...
<style>
form > div, form > label, form > input, form > b {
float:left;
}
</style>
However, floats are rather “out of fashion“ (in favor of i.e. flexbox).
Although in this case, a far simpler inline-block will do, to line up the inputs and the inside b-Tag.
(and you can avoid the <b>'s inside the labels by styling the labels)
<html>
<head>
<style>
label {
display: block;
font-weight: bold;
}
form > input, form > b {
display: inline-block;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label>aspect ratio:</label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label>value3:</label>
...
</form>
</body>
</html>
Use html entity of / which is / instead
Related
.box{
margin: 0 auto;
width:400px //you can set it in %.
height: 600px;
padding:20px;
background:#f9f9f9;
border:4px solid #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
</head>
<body>
<center>
<div class="box">
<img src="1.png" align="right">
<h1>Form Updation</h1>
<form name="first" method="get" action="https://www.mi.com/in/">
First name : <input type="text" name="fname" size="15" maxlength="25"><br><br>
Last name : <input type="text" name="Lname" size="15" maxlength="25"><br><br>
Password : <input type="password" name="Password" size="10" maxlength="15"><br><br>
Nationalaity : <input type="text" name="Country" size="15" maxlength="25"><br><br>
Phone Number : <input type="text" name="Phone" size="15" maxlength="25"><br><br>
</form>
</div>
</center>
</body>
</html>
output -
[Phone number is not in proper arrangemnt with the above one i need to come with phone number in arrangement like all in centre and onething is that i want these 5 should come up with by another eans there is some space which is left out in other work all the fillup section must come with space index.]
It's hard to get what you want but i guess your question is how can I align texts and inputs in a nice order.
So we can think a way to do that in your code.
Firstly think your text and input parts as an one. We can take the text in a div and give that a width like 50% or 33%. After that we can define another div for input and give it the remaining width or directly give the remaining width to input.
Up to now
*{
box-sizing:border-box;
}
#form{
width:50%
}
#form div,
#form input{
display:inline-block;
}
#form div{
width:35%;
}
#form input{
width:65%;
}
<form id="form" name="first" method="get" action="https://www.mi.com/in/">
<div>First name : </div><input type="text" name="fname" size="15" maxlength="25"><br><br>
<div>Last name : </div><input type="text" name="Lname" size="15" maxlength="25"><br><br>
<div>Password : </div><input type="password" name="Password" size="10" maxlength="15"><br><br>
<div>Nationalaity : </div><input type="text" name="Country" size="15" maxlength="25"><br><br>
<div>Phone Number : </div><input type="text" name="Phone" size="15" maxlength="25"><br><br>
</form>
But don't forget to make your components box-sizing to border-box. If you don't when you give to 33% and 66% width or anything that sums 100% won't work as side by side. Your input will get new line.So we give our form a width that we want, after that we made our input and div inline-block to get side by side nad then give the widths. If you want to center your text you can add text-align:left to your divs.
#form div{
width:35%;
text-align:left;
}
#form represent our form with it's id that we gave, #form div represent the divs that inside that form( you can check combinators) and so on. Here is a link for combinators either.
Combinators in CSS
I have a simple form like this:
<form method="post" action="/registration">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
<br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<br>
<input type="button" value="registger">
</form>
It works fine, but the I have found out that <br> shouldn't be used for this purpose, as it is only intended to be used with text.
If I remove the <br>, then everything will be rendered on a single line, which I do not want.
What is the correct, most clean way to display name-input pairs in a form with CSS, like this:
Alias: [__field__]
E-mail: [__field__]
[SUBMIT BUTTON]
I'd use divs, which will put the labels and inputs into their own block.
<form method="post" action="/registration">
<div>
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
<input type="button" value="registger">
</form>
I typically would put the input inside of the label (so when you click the label, it focuses the input), and then tell the label to be display: block;.
So,
<form method="post" action="/registration">
<label for="alias">
Alias: <input type="text" name="alias" id="alias">
</label>
<label for="email">
E-mail: <input type="text" name="email" id="email">
</label>
<input type="button" value="registger">
</form>
Then do:
label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
display: block;
// And a bottom margin for good measure :)
margin: 0 0 10px; // shorthand for margin-bottom
}
And that should get you what you want.
You could use divs with corresponding CSS:
.myFrm {
width: 250px;
}
input[type=text] {
float: right;
}
.form-group {
margin-bottom: 10px;
}
.form-group::after {
content: "";
clear: both;
display: table;
}
<form method="post" action="/registration">
<div class="myFrm">
<div class="form-group">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
</div>
<input type="button" value="registger">
</form>
I would just use a bit of css to do the trick. Give each of the labels a display:block;
label {
display: block;
}
You can use container divs around the label and input to group them or else make sure "display: block" is added to the label and input elements.
If you need the label to the left of the input then wrap both with a container div and to give you more control on the positioning you could float the label and input to the left or use flexbox.
You ask:
What is the correct, most clean way to display name-input pairs in a
form with CSS
I interpret your question to be related to matters of performance, code efficiency and maintainability. Since just changing the HTML structure does not address responsiveness in different view-ports, adding bits of CSS may have render blocking features but it does nevertheless makes your application ready for mobile responsiveness. This is how I see it:
form {
display: inline-block;
}
label {
margin: 10px;
font-weight: 600;
}
input{
position: absolute;
left: 15%;
}
input[type=button]{
top: 4%;
}
Note that for mobile viewports you may want to adjust the relative measures with media queries. So the question here is not about writing less code but the main requirements of the application.
Get a plunk for this here
What you have there is a list.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
http://reisio.com/temp/form1.html
I'm trying to put some input elements (~7) in the same line.
I have the following code:
<form>
<b> One </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Two </b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
<form>
<b> Three</b>
<input type="number" style = "width: 5%; vertical-align:top" class="form-control" name="quantity" value="1" >
</form>
The problem is that every input every input has it own line, and it not in the same line.
Edit: Also, I wish that it will be with space in that way that the inputs elements would comprehend the whole line.
Hoe can I do it?
Change the display, remove the inline styles. Example: http://jsfiddle.net/ys1Lgj7e/
form {
display:inline-block;
}
Your input elements should all share the same form, and your styling can be modified & put into CSS, which will simplify your code significantly.
Here's a working example:
http://jsfiddle.net/u4utpu6c/
HTML
<form>
<input type="number" />
<input type="number" />
<input type="number" />
</form>
CSS
input {
display: inline;
width: 5%;
vertical-align:top;
}
Set every form tag to 'display: inline;'
In that html file:
<style>
form {
display: inline;
}
</style>
OR in your css file:
form {
display: inline;
}
OR each tag :
<form style="display: inline;">
Hy,
This are my HTML Code:
<h2>Advertising over Push Notifications</h2>
<h3>Login</h3>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb" ></br>
Passwort: <input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb" ></br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
and i want that the text "Benutzername...." will be shown in the red area, i don't want a new wordwrap.
i want this:
<h3> elements have margins by default. Add CSS to remove it:
h3{
margin: 0;
}
You could insert a id into h3 and add CSS to remove it. Note: if you modify the tag h3 without an id or class, all h3 tags in your code will be modified.
HTML
<h3 id="login">Login</h3>
CSS
h3#login{
margin-bottom: 0;
}
Demo
HTML
<h2>Advertising over Push Notifications</h2>
<h3 class="login">Login</h3>
<span>Benutzername....</span>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">E-Mail:
<input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb">
</br>Passwort:
<input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb">
</br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
css
.login {
margin: 0;
}
Add additional div in html like this: DEMO
HTML
<div class="error">
<label for="infoLabel_CheckUserLoginWeb"></label>
</div>
then define a rule in css:
CSS
.error { float:left; height:20px; width: 100%;}
.login {margin:0;}
I have a form with hidden input fields. In IE7 the layout gets shifted. The submit button is in the next line. If you select the space in between it seems there each hidden input is a blank. What can I do against this? Here is the jsfiddle.
HTML:
<div id="column1">
<div id="searchform">
<form action="/index.php?id=17" method="post" name="searchform01">
<input type="text" name="tx_indexedsearch[sword]" value="Suchbegriff" class="searchform-input" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="hidden" name="tx_indexedsearch[_sections]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[_freeIndexUid]" id="tx_indexedsearch_freeIndexUid" class="hidden-inputs" value="_" />
<input type="hidden" name="tx_indexedsearch[pointer]" id="tx_indexedsearch_pointer" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[ext]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[type]" class="hidden-inputs" value="1" />
<input type="hidden" name="tx_indexedsearch[defOp]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[media]" class="hidden-inputs" value="-1" />
<input type="hidden" name="tx_indexedsearch[order]" class="hidden-inputs" value="rank_flag" />
<input type="hidden" name="tx_indexedsearch[group]" class="hidden-inputs" value="flat" />
<input type="hidden" name="tx_indexedsearch[lang]" class="hidden-inputs" value="-1" />
<input type="hidden" name="tx_indexedsearch[desc]" class="hidden-inputs" value="0" />
<input type="hidden" name="tx_indexedsearch[results]" class="hidden-inputs" value="10" />
<input type="submit" id="search-button" value="Suchen" />
</form>
</div>
</div>
CSS:
.hidden-inputs {
display: none;
visibility: hidden;
border: 0;
margin: 0;
padding: 0;
width: 0;
height: 0;
clear: left;
margin-left: inherit;
overflow: hidden;
}
#column1 {
width: 245px;
float: left;
background-color: #FFFFFF;
}
It is caused by empty text between input.hidden-inputs. You can fix it either by removing empty text between inputs or by setting font-size:0; for form element.
Examples:
font-size fix: http://jsfiddle.net/6fTHs/
Removing empty text: http://jsfiddle.net/keaukraine/BE7sV/
The only way i know of to prevent it is to not have the hidden element in the dom.
If the "Value I want hidden" part is used purely for computational purposes, you should use the "data" attribute.
Like this
<div data-custom-value="1001">Visible value </div>
In jQuery, HTML data attributes are automatically available via the data() api.
You can do
someElement.data('customValue') to read a value.
and
someElement.data('customValue', newValue) to set a value.
Hope I analyzed your problem correctly.
The simplest fix is probably a kludge like
form { word-spacing: -0.23em }
which reduces spacing between words inside the form by about the width of a space, or a little less. There are no words there, but IE 7 thinks there are – invisible words created by the hidden fields, separated by spaces.
A more robust solution is to remove the spaces around and between the hidden fields, as suggested by #keaukraine.