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.
Related
So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!
The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/
You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.
all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>
So I have a problem with that the "submit" box doesent show right under the "Password-input". So I wondered if you could help me. Thanks for any answers. Im not a professional programmer so keep that in mind.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" id="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Okey its very simple
<label> </label>
<input type="submit" id="Submit" value="Submit">
make an empty label for submit button
Just add 'br' tag which is nothing but new line. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<br>
<br>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<br>
<br>
<input type="submit" id="Submit" value="Submit">
<br>
<br>
</fieldset>
</form>
</body>
</html>
hope this helps for u!!
I am trying to create a form to create a new user for my website. I would like to have the form fields horizontally aligned, to make it look nicer. I have tried doing this using some simple CSS, but I cannot get it to work*.
<html>
<form name="newUserForm" method="post" action="createUserScript.php">
<p>Username: <input name="username" type="text" autofocus class="formField"> </p>
<p>E-mail: <input name="email" type="text" class="formField"> </p>
<p>Password: <input name="password" type="text" class="formField"> </p>
<p>Repeat password: <input name="passwordRepeat" type="text" class="formField"> </p>
<p>Administrator: <input type="checkbox" name="isAdmin" class="formField"> </p>
</form>
</html>
And the CSS for the .formField class is
.formField {
margin-left: 150px;
width: 200px;
}
The whole thing is located in a <div> with the following properties (I dont know if this has anything to say)
#content {
padding: 10px;
margin-left: 250px;
font-family: arial;
}
Currently it seems to be making the margin from where the text ends, but I am not sure. What am I missing here?
*I could probably find some crazy workaround to make it work, but I cannot think of anything that seems reasonable.
Another thing you can do is use table alignment. That way you don't have to pick a width:
<form>
<p><label>Username:</label><input>
<p><label>Password:</label><input>
<p><label>Shoe size:</label><input>
<p><label>Favorite color:</label><input>
</form>
CSS:
form {
display: table;
}
form > p {
display: table-row;
}
form > p > label, form > p > input {
display: table-cell;
}
label {
font-weight: bold;
font-family: sans-serif;
text-align: right;
padding: 0 5px 0 5px;
}
Here's a CodePen. You can also do this with a <ul> if you've got some name/value pairs outside of a form:
<ul class=pairs>
<li><label>Whatever:</label><p>Some stuff ...
<li><label>Something Else:</label><p>More stuff ...
</ul>
The <ul> would be the table, each <li> is a row, and the <label> and <p> elements are the cells.
This is what I'd do (using labels):
<html>
<style type="text/css">
label{display:block; float:left; width:130px;}
.formFeild{width:200px;}
p{clear:both; margin-bottom:5px;}
</style>
<form name="newUserForm" method="post" action="createUserScript.php">
<p><label>Username:</label><input name="username" type="text" autofocus class="formField"> </p>
<p><label>E-mail:</label><input name="email" type="text" class="formField"> </p>
<p><label>Password:</label><input name="password" type="text" class="formField"> </p>
<p><label>Repeat password:</label><input name="passwordRepeat" type="text" class="formField"> </p>
<p><label>Administrator:</label><input type="checkbox" name="isAdmin" class="formField"> </p>
</form>
</html>
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;}
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;
}