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;}
Related
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
I'm trying to create a log in form and my html so far is:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
I want to style it using CSS. How can I access:
a) the overall form to change the overall style
b) the email address title and box
c) the button
I have tried using . # > but confused myself now. It's probably a really silly mistake I'm making but I can't figure it out...
Here's how can you access:
a) the overall form to change the overall style
Use #loginform {/* CSS rules */} to address the overall style of the form container. Since there's no other element except the form, it will work as if you were targeting the form itself.
b) the email address title and box
use #loginform label {/* CSS rules */} to target the CSS rules at the label and #email{} to target the email input box. You can re-use this last rule for the other items by adding their IDs (e.g. #email, #password {/* CSS rules */})
c) the button
Use input[type=submit] {/* CSS rules */} to style the submit button.
I solved like this
CSS
<style type="text/css">
form{
text-align: center; /* To align the form center */
background-color: orange; /* sets the background-color to orange */
}
#password{ /* If you use class attribute, use .password{} */
/* to modify this section*/
}
#email{
width: 200px; /* to size the email bar*/
}
#submit_button{
color: #fff; /* Text Color*/
background-color: #5cb85c; /* Background color green*/
border-color: #4cae4c; /* border color light green*/
}
</style>
HTML
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<br /><br /><br />
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<br /><br /><br />
<label>
<span> </span>
<input id="submit_button" type="submit" value="Send" />
</label> <br /><br /><br />
</form>
</div>
</div>
Or instead you can use "class" or "id" to the form,label and input field to provide them individual style.
Wrapping the label around the input is one way to do things (and it is technically valid), the other way is to use the for attribute. The later is typically considered more acceptable to some because it avoids the need for the extra span.
<form id="loginform" action="" method="post">
<div class="input">
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</div>
<div class="input">
<label for="password">Passowrd</label>
<input type="password" name="password" id="password" />
</div>
<input type="submit" value="Log On" class="btn" />
</form>
Would then be styled like:
.input > label:after /* To place style/content after the label */
{
content: ':';
}
.input > label /* To target the label */
{
display:block; /* Puts the label above the input, just an example */
}
.input > input /* The input. */
{
background: yellow; /* for instance */
}
.input /* The whole input and label pair */
{
margin-bottom: 3px; /* Add space bellow each input, or whatever */
}
Otherwise, nesting the input inside the label removes the need for the for attribute on the label element, and id on input element. So, if we use your HTML:
<body id="login">
<div id="wrapper">
<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label>
<span>Email Address:</span>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
</label>
<label>
<span>Password:</span>
<input id="password" type="password" name="password" placeholder="Password" />
</label>
<label>
<span> </span>
<input type="submit" value="Send" />
</label>
</form>
</div>
</div>
We could style it like this:
#login > label
{
/* Style for input pair */
margin-bottom: 3px;
}
#login label > span
{
/* Style for the label text */
display:block;
}
#login > label > input
{
/* Style for the input itself. */
background: yellow;
}
Since you're just starting out and just want to see it working, maybe it would be simpler for you to attach an 'id' attribute to each html element, and then access them in your css that way (for the specifics you want to edit, e.g. email title, email input, submit button).
For example:
html
<input id="submitBtn" type="submit" value="Send" />
css
#submitBtn{ color:black }
If this doesnt work,
1.) Clear you cache
2.) Make sure your css file is actually included in your html
3.) Make sure each "ID" on the page attached to an element is unique
if that doesnt work, use your dev tools and fiddle around:
hit (f12) in any browser
First of all I recommend you changing the structure of your code to:
...
<form id="login" name="login" action="" method="post" accept-charset="utf-8" class="smart-green">
<h1>Login Form</h1>
<label for="email">Email Address:</label>
<input id="email" type="text" name="email" placeholder="Enter a valid email address" />
<label for="password">Password:</label>
<input id="password" type="password" name="password" placeholder="Password" />
<input type="submit" value="Send" />
</form>
And then the answers are:
a) access to the form
form#login{
...
}
b) the email address title and box
label[for=email]{
}
input[type=email]{
}
c) access the button
input[type=sbumit]{
...
}
I have tried googling but with no help most of them give solution as margin:auto
and also there are several questions on stackoverflow with same problem most of them have answer as margin:auto i am applying the same solution is not working for me
HTML
<div id="content" class="lcard">
<center>
<h1 class="n">Sign in To your<br> Crawler Account</h1><br>
<form onsubmit="return validateForm()" method="post">
<center><input name="Email" required type="email" placeholder="Email">
<input name="Password" required type="Password" placeholder="Password" >
<button type="submit" class="b"><b>Sign In</b></button>
</center>
<p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
</form>
</div>
CSS
.lcard
{
background-color:#EEEEEE;
height:400px;
width:400px;
margin:left;
}
.n
{
margin-bottom:50;
left:-50%;
}
input
{
padding: 5 10px;
width:274px;
height:44px;
margin:auto;
}
.b
{
border: 1px solid;
background-color:#3079ed;
width:274px;
height:44px;
margin:auto;
}
Why you are giving margin left here??
.lcard
{
background-color:#EEEEEE;
height:400px;
width:400px;
margin:left;
}
First thing I noticed is the margin: left which I'm not sure about if it's a real value or not.
You should also check the attributes within your input elements. Types and other values seem strange, try to mess around with them first and then try using input[type="text"] and input[type="submit"] in the CSS values, instead of just **input.
Put your center tag before the first div as you call the id content
<div id="content" class="lcard">
<center>
<h1 class="n">Sign in To your<br> Crawler Account</h1><br>
<form onsubmit="return validateForm()" method="post">
<center><input name="Email" required type="email" placeholder="Email">
<input name="Password" required type="Password" placeholder="Password" >
<button type="submit" class="b"><b>Sign In</b></button>
</center>
<p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
</form>
</div>
should be...
<center>
<div id="content" class="lcard">
<h1 class="n">Sign in To your<br> Crawler Account</h1><br>
<form onsubmit="return validateForm()" method="post">
<center><input name="Email" required type="email" placeholder="Email">
<input name="Password" required type="Password" placeholder="Password" >
<button type="submit" class="b"><b>Sign In</b></button>
<p id="reg" ><a href="C:/lcrawl/register.html" >New User Please Register</a></p>
</form>
</div>
</center>
First, remove OLD OLD center blocks, than just apply text-align: center to form and to header. JSFiddle
.n
{
text-align: center;
}
I changed ur css a little
.lcard
{
background-color:#EEEEEE;
height:400px;
width:400px;
margin-left: auto;
margin-right: auto;
}
Now It's work in my PC.
Nothing's wrong with your code
Here is jsfiddle, with your code plus minor modification
http://jsfiddle.net/Lb6mm/2/
i have basic html form with css elements and i can't figure out why CSS code is not applied and does nothing. There is my code:
<!doctype html>
<html>
<head>
<title> A basic form </title>
<style type ="text/css">
.form-field{
clear: both;
padding: 10px;
width: 350px;
}
.form-field label{
float: left;
width: 450px;
text-align: right;
font-size: xx-small;
}
.form-field input{
float: right;
width: 150px;
text-align: ;
}
#submit{
font-size: larger;
text-align: center;
}
</style>
</head>
<body>
<h1> A basic form </h1>
<hr>
<form action="#">
<fieldset >
<legend>Form Information </legend>
<div>
<label for="username"> Name :</label>
<input type="text" id="username" name="username">
</div>
<div>
<label form="email"> E-mail address:</label>
<input type="text" id="username" name="email">
</div>
<div>
<input id="submit" type="submit" name="submit"
value="Send Form">
</div>
<div>
<input type="reset" name="reset" value="Clear Form">
</div>
</fieldset>
</form>
</body>
</html>
In fact, it does make changes for my submit button, but form itself is still have base (left) alignment. What did i miss?
Any help would be appreciated, thanks!
I have edited your html.
Please take a look this fiddle
I have just added
<fieldset class="form-field">
Your style is for class "form-field" but it is not mentioned anywhere in the html code.
Edit your form tag to -
<form action="#" class="form-field">
Then you will be able to see the change.
This will do it for you. Fiddle here
fieldset {text-align:right;}
Make the form like this:
<form class="form" action="#">
Add this css:-
.form{
text-align: right;
}
The CSS code is not applied because the HTML element with the class "form-field" that you try to style doesn't exists. You need to apply the class to a parent element in order to be able to style the label and input.
Basically I want to create a form which will have all the text in one "column" and all the input fields in another, so it looks decent. It almost works, the problem is that when I make a new line, the line continues from the width of the previous one. I will post the source code below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.asd {
width: 100px;
height: 50px;
float:left;
}
.op {
float:left
}
</style>
</head>
<body>
<form action="demo_form.asp" autocomplete="on">
<div class="asd">First name:</div><input type="text" name="fname" class="op"><br />
<div class="asd">Last name:</div> <input type="text" name="lname" class="op"><br />
E-mail: <input type="email" name="email" autocomplete="off"><br />
<input type="submit">
</form>
</body>
</html>
You need to add an element with the style clear: both after each line. That will reset the floating position so the next elements will be positioned all the way to the left.
Instead of float: left; in your CSS, try using display: inline-block; on both of your classes.
Also, wrap the email label in the div tag, like you did for first/last name.
I think you don't need any height there. Just put whole line in div and float the elements inside..
My DEMO: http://jsfiddle.net/goodfriend/pt4Ua/20/
HTML:
<form action="demo_form.asp" autocomplete="on">
<div class="line"><span class="asd">First name:</span><input type="text" name="fname" /></div>
<div class="line"><span class="asd">Last name:</span> <input type="text" name="lname" /></div>
<div class="line"><span class="asd">E-mail:</span> <input type="email" name="email" autocomplete="off" /></div>
<div class="line"><input type="submit" /></div>
</form>
CSS:
.asd {
width: 100px;
float:left;
}
.line {
margin:7px;
display:block;
}
Hope this helps a bit.
1) Clean up the html by using form html elements
2) Simplify the css
3) Enjoy
JSFiddle: http://jsfiddle.net/Bushwazi/XHtUL/
HTML:
<form action="demo_form.asp" autocomplete="on">
<fieldset>
<label for="fname">First name:</label>
<input type="text" name="fname" class="op">
</fieldset>
<fieldset>
<label for="lname">Last name:</label>
<input type="text" name="lname">
</fieldset>
<fieldset>
<label for="email">E-mail:</label>
<input type="email" name="email" autocomplete="off">
</fieldset>
<input type="submit">
</form>
CSS:
form {
width:100%;
}
fieldset {
width:100%;
display:block;
padding:0.5em 0;
border:none;
}
label {
display:inline-block;
width:40%;
padding:0 5%;
}
input[type=text],
input[type=email] {
height:100%;
width:45%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type=submit] {
float:right;
margin:0 5% 0 0;
}