Looking for a quick easy way to Add Text on top of a pic as a user fills in fields on a form.
I am trying to create an order form for a Brick Design Project I am running and this is driving me crazy.
I am trying to keep it simple as I am just trying to learn styling and coding through CSS3 and HTML5.
<table>
<tr>
<td>
<br />
<br />
<br />
<br />
<label for="Line1">Line1:</label>
<input id="Line1" name="Line1" value="" maxlength="18">
<br />
<br />
<label for="Line2">Line2:</label>
<input id="Line2" name="Line2" value="" maxlength="18">
<br />
<br />
<label for="Line3">Line3:</label>
<input id="Line3" name="Line3" value="" maxlength="18">
<br />
<br />
</td>
<td>
</td>
</tr>
<tr>
<td><img src="paver.jpg" width="100%" height="100%" border="2" alt="" /> [Line1]
</br>[Line2]</br>[Line3]</br>
</td>
<td>
<input type="reset" value="Reset Values">
<br />
</td>
<td>
<input type="submit" value="Quick View">
</td>
</tr>
In properly used HTML5 and CSS3, the main thing is to separate presentation from content.
-> Content: goes into the HTML.
So you have a from, labels, input fields, some buttons
You do not have a table! (when looking at content)]
-> layout (presentation) goes into the CSS
Here you would have sizes, positionining, colors, background images, etc.
Now your image you want behind your form: it's hard to tell up front this has to be presentation (I'd guess in 99% of cases it would be), but it could be argued otherwise in more rare cases.
Once you have this separated, how it looks is mere CSS, and in CSS putting things over one another or using background images etc. is all pretty much a piece of cake.
So what do you want to end up with?
HTML:
a form!
a fieldset (optional)
the input fields (they need atype AFAIK)
Try to avoid any and all that's just there for how it looks.
CSS:
Everything needed to make it look like what you seek to have
(but you currently have nothing, so it's kinda hard to nudge you in the right direction)
I'd suggest a good tutorial.
Ref: (these contain a lot more detail and examples)
https://www.w3.org/TR/html5/forms.html
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms
Related
I am trying to put a status image (showing a tick if email is correct or cross if not) next to the email field in my form.
The problem is my registration form is using the table method , so the image is not showing next to the field but below it. Can anyone help me out here?
This is what I tried to do but still not work the way I want it to.
<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
The issue is because the <td> has not enough space to fit in both text field and the image.
either add more width to the <table> or the 2nd <td> will solve the problem.
Since your image is of a check mark and an x, just use the unicode equivalents:
✔ = ✔
✘ = ✘
And simply get rid of the image altogether.
All it needs right now is space to fit in.
<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
Take a look at this fiddle, what changed is the size of the table containing the column. You may either reduce the input width or let it more space by increasing the table width.
I'm a sophomore in high school and I'm taking web design. I taught myself HTML and basic CSS over the summer. This was beneficial because my web design teacher knows nothing about HTML, CSS, or JavaScript. We have to create a personal website and the teacher said I could do my church's site since I was already working on it.
The teacher is making us use stuff from the book that's been covered in the class. The book is out of date. It teaches frames/framesets, table layouts, and talks about compatibility for the waring Netscape and Internet Explorer. (I'm doing a real website. No frames whatsoever.)
I need to include a table in my website, but I have no need for one. I decided to try to put a form inside of a table. I put my form inside of a <tr> tag, but its not displaying right.
If y'all have any better table ideas, then I'm all ears.
http://www.gracepensacola.com
I guess putting a form into tr tag is not a valid HTML. What you need to do is something like this:
<table>
<tr>
<td>Put your form here</td>
</tr>
</table>
After searching through several pages on Google, I came across an example. I put the example in JsFiddle.
The <table> should be nested inside of the <form>.
http://jsfiddle.net/Wf33B/
<form method="post">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>
<tr>
<td>
<label for="password">Password:</label>
</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="cancel" value="Cancel" />
</td>
<td>
<input type="submit" name="send" value="Send" />
</td>
</tr>
</table>
</form>
I have a very simple form for data input. Just labels with inputs. But my labels are localized, so I don't know how long text for different languages will be. This problem is easily solved with table layout:
<table>
<tr>
<td>
<label for="Text1">Short</label>
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
<label for="Text1">Looooooooong</label>
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
</table>
No matter how long labels are my layout will be always nice. But us many say using table tag with non tabular data is not good. I don't now how to solve this problem with divs.
<div>
<div style="float:left; width:50px;"><label for="Text3">Short</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:50px;"><label for="Text4">Looooooooong</label></div>
<div style="float:left;"><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
With this solution I need to use fixed size divs. Of cource I can set some big value for label divs width, but I want that my UI takes as much space as needed.
Any ideas?
The only way to really get a nice, adjustable layout similar to the one you get with an HTML table (which is semantically correct here, should someone care about this) is to use table layout in CSS, i.e. to use display: table, display: table-row, etc. It’s probably obvious how to do that. But it will have more limited browser support than an HTML table.
Any other approach has some rigidity where a guess on the widths of labels or the entire... construct has to be made.
This is what I came up with.
It's cleaner than yours, both the tabular and div approach.
The point of a so called "div layout" is to not have the not-semantic table stuck on your site like a pain in the neck. That doesn't necessarily means you need divs! A simple form and labels can do just fine.
The Code
HTML
<form>
<label>Short<input></label>
<label>Loooooooooooooooong<input></label>
</form>
CSS
form {
width: 50%;
}
label {
display: block;
}
label input {
float: right;
}
I've set the form to 50% so that you can easily resize the view port and see what happens when the width is not sufficient. This way, the input will be pushed down, but hte label won't be broken.
It's usually good to follow this rule of thumb: If a div only has one child nested inside of it, you can usually skip it. This rule works for simple designs like this (there are cases where extra divs are needed for complex design issues)
Although I am not completely clear as to what your layout needs are, I like to right-justify labels for readability:
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text3" >Short:</label></div>
<div style="float:left;"><input id="Text3" type="text" /></div>
<br style="clear:left;" />
</div>
<div>
<div style="float:left; width:104px; text-align:right; margin-right:4px;"><label for="Text4">Looooooooong:</label></div>
<div style="float:left; "><input id="Text4" type="text" /></div>
<br style="clear:left;" />
</div>
I don't know if this helps you, but after AVOIDING tables like the plague for the past 5 years I am coming to realize there are a lot of old school instances that work really well with tables. The past 2 of 5 form solutions have been inside tables. Like you said, it's "nice" and neat without a lot of extra code work.
If the table works, use it.
Hello I try to align all my input to have a normal form! I can not make it fit together!!GRR Thanks for your help please...This is made 2 hours im lost my time on this simple thing.....
<form name="input" action="html_form_action.asp" method="get">
<div id="one">
<p><label>Prénom</label> <input type="text" id="Prénom"/></p>
<p><label>Nom</label> <input type="text" id="Nom" /></p>
<p><label>Mot de passe</label> <input type="text" id="Pass" /></p>
<p><label>E-mail</label> <input type="text" id="Mail" /></p>
</div>
<input type="submit" value="Submit" />
</form>
You can give your labels width, and text-align them to the right. To do that you have to make them inline-block elements.
See this fiddle
I guess you don't have to align them right. That's just a style I see a lot when people use a table to do this.
If you just want to make it line up without using a table you can just use some simple CSS:
label {
width: 120px; //however wide your longest label is
float: left;
}
then just take out the p tags and put line breaks after each input.
I suppose you mean tabular appearance for the form, in two columns, one for the label, another for the input field, with the second column aligned left, first column either left or (more readably perhaps) right. The most obvious and most robust way is to make it a table:
<table id="one">
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/>
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" />
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" />
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" />
</table>
Then style as desired in CSS, e.g. with td:first-child: text-align: right.
This causes the first column to be as wide as needed for the longest label. Other methods require a guess on the width, and this is not robust, as the width needed will depend on the font.
To anyone who then accuses you for “using tables for layout,” you can answer that this is a method that actually works and that there is no reason why a form like this could not be regarded as tabular data.
Not really sure what do you want to achieve.
But if you want to align the values input-ed into textbox. In the input tags , add :
style="text-align: right"
If you want to align all textbox to the right, I suggest you can re-format your form in a table.
What is considered the best practice for laying out forms in html? Specifically where you have a set of fields with labels, and possible error indicators. The best I can do is use a table, but that doesn't work real well in a css oriented layout design. For example:
<table>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
<td style="display: none" id="NameError">*</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" /></td>
<td style="display: none" id="PhoneError">*</td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" /></td>
<td style="display: none" id="BirthdayError">*</td>
</tr>
</table>
This doesn't seem very CSS, but I am not sure how to use a css oriented layout to make this work right.
What would be considered best practice?
I don't know about you guys, but I don't use much markup for form layout.
Here is the markup for a simple log in form (no layout markup i.e. divs, tables, etc)
<form method="post">
<label>Username</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<input type="submit" name="Log In" />
</form>
Here is CSS for the form
label,input{float:left}
label,input[type="submit"]{clear:left}
Here is the result
The amazing thing about this is:
Lack of markup
Lack of CSS
Flexibility
If you look at the css, the label element is being cleared left (and floated left). Meaning that the label will float with its fellow inputs however every label will be a new line.
This makes it VERY EASY to add extra inputs. Even validation messages after inputs
Take this form for example
<form method="post">
<label>Name</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<label><abbr title="Date of Birth">D.O.B.</abbr></label>
<input type="text" name="dob_day" />
<input type="text" name="dob_month" />
<input type="text" name="dob_year" />
<input type="submit" name="Log In" />
</form>
With this CSS
label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}
We get
It really is that simple :)
Using this concept, you create a huge number of possibilities, and you'll never have to use a table for layout again!
Use actual <label> elements for field labels, which is good for usability too, and style them appropriately using CSS.
For instance,
<label for="name">Name</label>
<input type="text" name="name">
Then in your CSS, you could style LABEL elements with, e.g., display:block and a width of your desire, and appropriate clear values.
For tickbox / radio inputs, the input itself should be inside the <label> element - this means that the label itself should be clickable to select that input, for instance:
<label for="mycheckbox">
<input type="checkbox" name="mycheckbox"> Tick me if you dare</label>
One can argue a form is tabular data, so a table is acceptable. As David states, they main issue is that you want to use proper LABEL tags.
In your example, I'm not sure what you gain from using a table over CSS, though.
Best Practice = NEVER use table for layout.
You can try CSS framework like blueprint our 960 grid system.
"Best Practice" would be to use a table for what it's meant to do (represent data) and use a combination of div, span or other elements to style your input form.
Posting my answer to your follow up question here as it is likely to get closed as a duplicate.
I'm not sure how good the browser support on this is, tested in FF4: http://jsfiddle.net/shanethehat/7h3bC/11/
<div id="tableForm">
<div class="tableRow">
<div class="tableCell">
<label for="mycheckbox"> Tick me if you dare</label>
</div>
<div class="tableCell">
<input type="checkbox" name="mycheckbox" id="mycheckbox">
</div>
</div>
<div class="tableRow">
<div class="tableCell">
<label for="mytext"> Give me some text test test</label>
</div>
<div class="tableCell">
<input type="text" name="mytext" id="mytext">
</div>
</div>
</div>
div#tableForm {
display:table;
}
div.tableRow {
display:table-row;
}
div.tableCell {
display:table-cell;
width:inherit;
}
Yes, I know, I've just created a table using divs. The point though is that this is nicely accessible and semantically proper.
Edit: fails miserably in IE7 where fixed width would be the only way, but 8 and 9 seem OK.
Edit2: switched the label/fields around and set right align: http://jsfiddle.net/shanethehat/7h3bC/12/. The markup is getting a little class heavy at this point. :first-child would be an alternative to using the left class, but at the expense of IE8.