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]{
...
}
Related
I'm currently making a contact page for my website in Reactjs, but how would I go about styling the required message when I click Submit? I want the message to appear directly below the input or textarea, but how do I do that?
Relevent Code
<form className='contact-form' onSubmit={this.handleSubmit}>
Fields marked with an <span className='red'>∗</span> are required.
<div className='form-item'>
<label htmlFor="name">Name <span className='red'>∗</span></label>
<input className='name'
type="text"
name="name"
value={this.state.name}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="email">Email <span className='red'>∗</span></label>
<input className='email'
type="email"
name="email"
value={this.state.email}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="subject">Subject <span className='red'>∗</span></label>
<input className='subject'
type="text"
name="subject"
value={this.state.subject}
onChange={this.handleChange}
required />
</div>
<div className='form-item'>
<label htmlFor="message">Message <span className='red'>∗</span></label>
<textarea name='message'
rows='8'
value={this.state.message}
onChange={this.handleChange}
required />
</div>
<button className='btn' type='submit' disabled={this.state.disabled}>Submit</button>
<div className={this.state.isSent ? 'message-open':'message'}>Message has been sent.</div>
</form>
You can use constraint validation API. There is a pseudo class named invalid.
You can put some text for this warning under each input element with an element you set to be visibility hidden in css. When they are invalid by your constraint, you can set them to be visible.
small {
visibility: hidden;
}
small:invalid {
visibility: visible;
}
This works for every constraint. If you want only required to behave like that you can select them accordingly.
input:required + small {
visibility: hidden;
}
input:required + small:invalid {
visibility: visible;
}
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
Suppose I have a web page with a form:
<form>
<label for="FirstName">First:</label>
<input name="FirstName" type="text">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text">
<label for="LastName">Last:</label>
<input name="LastName" type="text">
</form>
If I size the browser window small enough, I get a line break between the label that says "Middle:" and the "MiddleName" input. It would be better to put a break between labels and input fields that are not related, e.g. break between "FirstName" input and label for "MiddleName", and/or between input "MiddleName" and label for "LastName". Obviously I can add <br/> tags, but is there a good way to keep the related items together, and still use only 1 line when the browser window is wide enough?
I realize this is a contrived example, but this is pattern I am having trouble with in several more complicated real world forms.
Put the inputs inside the labels, you don't even need the for attributes. Then style the labels with white-space: nowrap to prevent automatic line breaks.
label { white-space: nowrap; }
<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>
Surround the related elements within an wrapper and then prevent line breaks inside the wrapper with CSS:
.wrapper {
white-space: nowrap;
}
<form>
<span class="wrapper">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrapper">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrapper">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
You can surround each set with a wrapper that is display: inline-block;
.wrap {
display: inline-block;
/* Only include this if
you don't want the text within the spans
to wrap when the window is small enough
*/
white-space: nowrap;
}
<form>
<span class="wrap">
<label for="FirstName">First:</label>
<input name="FirstName" type="text" />
</span>
<span class="wrap">
<label for="MiddleName">Middle:</label>
<input name="MiddleName" type="text" />
</span>
<span class="wrap">
<label for="LastName">Last:</label>
<input name="LastName" type="text" />
</span>
</form>
I use getuikit for form styling, they do it with something like this:
HTML
<label>My label</label>
<div class="controls"><input type=text/></div>
CSS
label {
float:left;
margin-top:5px; //to center the label vertically
width: 200px;
}
.controls {
margin-left:200px;
}
It doesn't break semantics. Putting input inside label is little strange :)
First: you must see the following picture.
As you see, the red rectangle, the two fields does not line up, there is a little space in the start of the top field, while the next field does not.
Note: this problem occurs in all browsers.
HTML
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label> Username: <input type="text" name="username" id="username" /></label><br />
<label> Password: <input type="password" name="password" id="password" /></label><br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
CSS
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
How can I fix that problem ?
Why the input text and password fields are not line up?
Username and Password are different length words
How can I fix that problem ?
Use a monospace font
Wrap the words in an element that you set to display: inline-block; width: ??? where ??? is a fixed value.
That element could be the labels.
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>
label {
display: inline-block;
width: 7em; /* adjust to taste */
}
Keep in mind that you will get different fonts on different systems, so give yourself some leeway with the width of the elements if you take the second approach.
"Username:" is slightly wider than "Password:"
That is why they are not aligned.
You want to do something like putting the fields in a table or defined width divs.
It's because the text of Username: is a few pixels longer than Password: ?
You need to close the label tags, so the text is actually in the label (setting the for attribute will also make the inputs selectable by clicking the label)
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label> <br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
Then put a common width on the labels with css
div#loginForm form label {
display: inline-block;
width: 200px; // whatever looks best
}
Not all characters of the font has the same width for all fonts. In your case Username is slightly larger than the Password, therefore the alignment issue.
To fix the issue you need to put the labels in a fixed with box
HTML - wrapped each input element in a div
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<div><label>Username:</label><input type="text" name="username" id="username" /></div>
<div><label>Password:</label><input type="password" name="password" id="password" /></div>
<div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>
CSS - set width of label and set display to inline-block
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
#loginForm label { width: 100px; display: inline-block; }
can anyone help me?
I need to place a div after a textbox in a html form.
ie.label,textbox,and new div is in same line
please see my html code .i didn't add div code yet.
please can any one help me to add a div in same line without any modification to this codes.
because i made several css codes for aligning this labels and text boxes
<form action="operates/signup.php" method="post" name="signupform" id="signupform">
<label id="fnamelabel" for="fnam">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" />
<p>
<label id="lnamelabel" for="lnam">Last Name :</label>
<input type="text" name="lnam" id="lnam" tabindex="2" />
</p>
<p>
<label id="yemail" for="email">Your Email :</label>
<input type="text" name="email" id="email" tabindex="3" />
</p>
<p>
<label id="reemail" for="remail">Re-enter Email :</label>
<input type="text" name="remail" id="remail" tabindex="4" />
</p>
<p>
<label id="npass" for="password">New Password :</label>
<input type="text" name="password" id="password" tabindex="5" />
</p>
<p>
<label id="mskill" for="bskill">Main Skill :</label>
<select name="bskill" id="bskill" tabindex="6">
</select>
</p>
<p>
<input type="checkbox" name="termsanc" id="termsanc" tabindex="6" />
<label id="terms" for="termsanc">I agreed the Terms and Conditions</label>
</p>
<div id="signupbutton" onclick="document.forms.signupform.submit()"></div>
</form>
Thank you
You can style the div as inline, but you should rather use a span.
<label id="fnamelabel" for="fnam" style = "display:inline">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" style = "display:inline" />
<div id="newDiv" style = "display:inline"></div>
normally I wouldn't use in-line CSS like that, but as you didn't post the css i felt it'd be necessary.
First of all, let's work on that markup!
<form action="operates/signup.php" method="post" name="signup_form">
<label>First Name:
<input name="first_name"></label>
<label>Last Name:
<input name="last_name"></label>
<label>Your Email:
<input type="email" name="email"></label>
<label>Please Reenter Your Email:
<input type="email" name="validate_email"></label>
<label>New Password:
<input type="password" name="password"></label>
<label>Main Skill:
<input name="main_skill"></label>
<label><input type="checkbox" name="terms_and_conditions">I agreed the Terms and Conditions</label>
<button type="submit">Submit</button>
</form>
<style type="text/css">
form {
display: block;
width: 400px;
}
label {
display: block;
padding: 5px;
margin: 5px;
}
form label input {
float: right;
}
input[type=checkbox] {
float: none;
}
</style>
There, now doesn't that look much better?
As for the original question, don't use a div, div is a completely-unsemantic block-level element. If you want an inline element (i.e. to show on the same line), use a span, which is a completely-unsemantic inline-level element.