Hi,
I have 2 HTML errors which I am struggling to fix as the error description doesn’t explain clearly what I should do.
How to underline one word in a sentence:
Everything <u>Vital</u> For Amazing Holidays
How to add a placeholder to a search box. So the search form has an entry in
"text" name="keywords" placeholder='perform a search...' class="homepagesea…
Does anyone have any suggestions on how to fix these please?
The <u> tag is deprecated as it has no semantic meaning. Technically , you should use a <span class=“underline”> or something like that OR <em class=“underline”> (if there is some actualsemantic emphasis to this content) and use CSS to style the tag eg.: .underline{ text-decoration: underline; }.
Unless you are using an HTML5 doctype, ‘placeholder’ IS NOT a valid attribute. I am not sure if this has anything to do with it, but you have single quotes for your placeholder and double quotes for everything else.
Hope that helps.
Thanks,
I sorted the Underline with a DIV and inline CSS.
This is the DOC type I am using. What placeholder should I use with this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The reason that <u>…</u> is deprecated is because webmasters are strongly advised not to underline text on a web page except for clickable links. Unless there’s a very good reason for underlining the text, you should generally use <strong> or <em> instead if you want the text to stand out.
What about the placeholder. Can anyone advise what placeholder I should use?
The placeholder attribute is not supported in IE9 and under but most other modern browsers versions support it including IE10. It is only valid in the html5 doctype but will work in other doctypes in those browsers that support it but just will not be valid.
<form name="form1" method="post" action="">
<fieldset>
<legend>Placeholder test</legend>
<label for="test">test</label>
<input type="text" name="test" id="test" placeholder="Enter name...">
</fieldset>
</form>
You could add js support for other browsers as mentioned in this article.
i think that placeholder is just for HTML5
<input type=“text” name=“test” id=“test” placeholder=“Enter name…”>
you need to change your doctype to HTML5 and fix all issues becuse of the change or!! you can use javascript insted of the placeholder.
Thanks for posting but please read previous posts before making a reply as duplicating information already provided is not necessary and will look like fluff. Thank You.
sorry, my mistake!! i hope he solved it! 
You can also use JavaScript for this, which will work on all browsers (as long as the user has JS enabled).
Thanks,
Does anyone know the Javascript for a placeholder?
try this:
<script type="text/javascript">
<!--
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
// -->
</script>
<input type=“text” value=“search this site…” name=“query” id=“searchinput” onfocus=“clearDefault(this)” />
Here’s another example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Placeholder text</title>
<script type="text/javascript" >
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function resetFields(whichform) {
for (var i=0; i<whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.type == "submit") continue;
if (!element.defaultValue) continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
function prepareForms() {
for (var i=0; i<document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function() {
return validateForm(this);
}
}
}
addLoadEvent(prepareForms);
</script>
</head>
<body>
<form method="post" action="">
<label for="name">Name</label><br>
<input name="name" type="text" id="name" value="Name"><br>
<label for="email">Email Address</label><br>
<input name="email" type="text" id="email" value="Email"><br>
<label for="phone">Telephone</label><br>
<input name="phone" type="text" id="phone" value="Telephone"><br>
<input type="submit" name="submitted" value="Send">
</form>
</body>
</html>
Hi,
I tried this but couldn’t get it work.
<script type="text/javascript">
<!--
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
// -->
</script>
I tried this an a few other layouts.
<form action="/test/searchresults.php" method="post">
<script type="text/javascript">
<!--
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
// -->
</script>
</form>
The others appear to be HTML5 but I am using XHTML1.0.
Do I need to change something to use these?
Hi,
That’s an incomplete script and won’t work.
Ralph has given you a full working example in Post #13 so just copy that example. It will work with whatever doctype you use but as long as JS is enabled. Just copy and paste and you will see that it works.
(Even the html5 placeholder attribute will work in other doctypes as long as the browsers supports it but will of course not be valid. )
The code above works fine but when I change it XHTML1.0 which I am using it creates 36 HTML errors in the validator.
Is there a placeholder for XHTML1.0? I tried searching Google but didn’t find anything that worked.
Hi,
You can’t just change the doctype without changing the html so that it is valid for the doctype you are using.
If you want to use xhtml then you need to self close empty elements (tags like <br />, <input />, <img /> etc…)
Here is Ralph’s example in valid xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" >
//<![CDATA[
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function resetFields(whichform) {
for (var i=0; i<whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.type == "submit") continue;
if (!element.defaultValue) continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
function prepareForms() {
for (var i=0; i<document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function() {
return validateForm(this);
}
}
}
addLoadEvent(prepareForms);
//]]>
</script>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Placeholder test</legend>
<label for="name">Name</label>
<br />
<input name="name" type="text" id="name" value="Name" />
<br />
<label for="email">Email Address</label>
<br />
<input name="email" type="text" id="email" value="Email" />
<br />
<label for="phone">Telephone</label>
<br />
<input name="phone" type="text" id="phone" value="Telephone" />
<br />
<input type="submit" name="submitted" value="Send" />
</fieldset>
</form>
</body>
</html>
Is there a placeholder for XHTML1.0? I tried searching Google but didn’t find anything that worked.
I’ve answered this a few times now but I’ll try again
The “placeholder” attribute is a new attribute added to html5 only. There was never anything before this - all you had was the value attribute for the default value.
Modern browsers ie10 and latest Fifexox, Safari etc all support the placeholder attribute but it will only be valid if you use the html5 doctype. As I said above the placeholder attribute will still work in those same browsers with any other doctype but just not be valid.
Cheers dude, thats really good of you.
Im using the search on each pages of my site. Can I place the code onto one page and include it using PHP or making it any simpler to use?
Yes, it’s fine to do that. You can place the form itself in an include file and place it on every page, and you can place the script in an external js file and link to it on each page where the forum appears. Normally I would place all of the links in the <head> of the document and put them inside a single include file, so that I only have to edit them in one place. But this is a separate include from the form.