I want to create an error box for a form like the one below.
I already themed the input box and am using jQuery validation to display errors. However I can't get that error box right. I think I'll need to put that together with three tags, but I don't know what tags to use (jQuery validation uses a label tag to display the error).
My current code for the error is:
<label for="email">
<span>Email:</span>
<input type="text" id="email" name="email" class="error">
<label for="email" class="error" style="">Az e-mail címet kötelező megadni</label>
</label>
I must make this IE7 compatible.
I made the following changes:
<div class="dataline">
<div class="label">Label:</div>
<div class="field"><input type="text" id="name" name="name" /></div>
<div class="arrow"></div>
<label class="error">Error text</label>
<div class="ender"></div>
</div>
I set the arrowhead as an image for the class arrow so now it looks perfect. Basicly I used 4 left floated block elements (label, input, arrowhead and bubble body). Now I only have two problems: the arrowhead is displayed even when there's no error. How can I hide it when the label is not after it? My other problem is that the container div is 800px wide and if the error text is long, it wraps around to the next line. How can I avoid it?
My css is:
div.dataline {
margin: 10px 0 0 0;
white-space: nowrap;
width: 3000px;
owerflow: visible;
height: 60px;
}
div.field {
float: left;
}
div.label {
float: left;
width: 120px;
margin: 20px 0 0 0;
}
div.arrow {
background-image: url('gfx/redarrow.png');
margin: 7px 0 0 10px;
background-repeat: no-repeat;
width: 20px;
height: 45px;
float: left;
}
div.ender {
background-image: url('gfx/bubbleend.png');
margin: 7px 0 0 0px;
background-repeat: no-repeat;
width: 3px;
height: 45px;
float: left;
}
label.error {
height: 27px;
background-image: url('gfx/bubblemiddle.png');
float: left;
padding: 9px;
margin: 7px 0 0 0;
}
the following fiddle is a good start for your implementation:
http://jsbin.com/aReQUgay/1/edit
#email.error
{
border-color: red;
}
#email.error + label
{
background-color: red;
}
Related
I want to align two inputs in the same line.
I used the solutions available here:
http://jsfiddle.net/XAkXg/
http://www.java2s.com/Code/HTMLCSS/Form/inputclassidselectorandpropertyselector.htm
Aligning html inputs on same line
html form - make inputs appear on the same line
Everything would work, but in my case, the input[type=text] has been defined earlier
The CSS code looks pretty much as this:
input {
margin-left: 50px;
}
input[type=text] {
width: 75%;
min-width: 450px;
padding: 12px 20px;
box-sizing: border-box;
outline: none;
border: 1px solid #f7fbff;
background-color: #f7fbff;
}
input[type=text]:focus {
background-color: #c6e2f2;
}
input[type=number]:focus {
background-color: #c6e2f2;
}
and now I have implemented the location feature into my HTML code:
<figure class="fig" id="location">
<label>
<div class="order">1</div>
<p>Location<span class="asterisk">*</span></p>
</label>
<button class="locbtn" id="btn-geolocation">Find my location</button>
<br>
<label for="lat" class="location">Latitude</label>
<input type="text" name="latitude" class="location">
<label for="lon" class="location">Longitude</label>
<input type="text" name="longitude" class="location">
<div style="clear:both;"></div>
</figure>
and accordingly CSS:
.location {
width: 50x;
float: left;
vertical-align: top;
margin: auto;
}
.location input[type=text]{
width: 25px;
display: inline-block;
}
and the effect is, as you can see below:
the input texts don't work, since they have been defined earlier in the code (for entire form).
How can I make the input[type=text] definition also for this section considered?
Moreover, instead of display: inline-block; I tried: display: inline; and float: left; It didn't work either.
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I have a 'row' div that contains, essentially, a label, then a text input, then a hyperlink. My problem here is I wish the width of the input to always fill the available width between the label and the hyperlink. I have tried numerous approaches, but with only varied forms of failure. I suspect maybe I can use some sort of margin voodoo to make the a tag not absolute, and always have the input neatly bounded by the lable and the a, but I am now at a complete loss as to what to try next.
Here is my HTML:
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
And here is the CSS:
.manualNotification #recipientsTab .email-row {
margin-top: 5px;
margin-bottom: 5px;
}
.manualNotification #recipientsTab .email-row label {
display: inline-block;
width: 50px;
text-align: center;
}
.manualNotification #recipientsTab .email-row a {
position: absolute;
width: 50px;
right: 10px;
margin-left: 10px;
}
Flexbox can do that
.email-row {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
}
.email-row label {
flex: 0 0 50px;
text-align: center;
}
.email-row input {
flex: 1;
}
.email-row a {
flex: 0 0 50px;
margin-left: 10px;
}
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
JSfiddle Demo
please add flowing css end of your css:
div.email-row{max-width: 30%; float:left;margin-right:20px}
see the following links for more details:
http://www.cssdesk.com/gDzpd
I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.
I would like my table to look like the one in image with CSS. Is there a way to do it because I tried by my side as much as I could but did not work. I would appreciate your help.
Here is my HTML code
<div id="login_fields">
<form id="login_form">
<table>
<tr>
<td>User</td>
<td><input type="text" name="user" id="user" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
</table>
</form>
</div>
May I suggest amending your HTML (the table is entirely unnecessary), to the following:
<form action="#" method="post">
<!-- using a label means that clicking the text automatically focuses
the relevant input, the value of the 'for' attribute must match the 'id'
of the relevant input though -->
<label for="uName">User</label>
<input id="uName" />
<label for="pass">Password</label>
<input type="password" id="pass" />
</form>
With the following CSS (amend colours and dimensions according to taste):
form {
/* aesthetics, just to move the label/input pairs from the edge of the screen */
padding: 1em;
}
label,
input {
float: left; /* to allow for width to be given, and for clearing */
border: 1px solid #999; /* amend the following as required */
line-height: 1.2em;
padding: 0.2em 0;
font-size: 1em;
height: 1.4em;
margin-bottom: 0.8em;
}
input + label {
clear: left; /* this styles a label element that immediately
follows an input, and forces a new-line */
}
label {
text-indent: 0.5em; /* moves the text away from the curved corners */
width: 30%;
border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}
input {
width: 60%;
border-radius: 0 0.5em 0.5em 0;
outline: none;
}
input:focus,
input:active {
box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
default outline, and gives visual
feedback to show the input is focused/active */
}
JS Fiddle demo.
I'd start replacing the TD's for User and Password with TH's, since they're table headers. Then I'd produce two images, one with the curve in the left and one with the curve in the right, then I'd apply then in the background. The CSS would look like that:
table tr th { background: url(bg-left.png) no-repeat; width: 100px; height: 40px; }
table tr td { background: url(bg-right.png) no-repeat; width: 250px; height: 40px; }
I've removed the font styling to keep it easy to read.