XH 1.6.1: Improving searchbox()

[cmb]

Hello Community,

I suggest we improve the searchbox for XH 1.6.1 (to not further postpone the release of 1.6). For one thing it would be nice if it was possible to set the placeholder attribute (and perhaps additionally the title), and maybe we should even switch to type="search". This would probably not validate for HTML 4.01 and XHTML 1.0, so we may consider to make that a config option (or trigger this behavior only, if an appropriate language string is not empty).

Another thing is the structure of the markup. Now it is

Code: Select all

<form ...>
    <div id="searchbox">
        ...
    </div>
</form>

I wonder why we don't set the id for the FORM element and omit the DIV completely.

Christoph

[svasti]

For one thing it would be nice if it was possible to set the placeholder attribute (and perhaps additionally the title),

So this would add a language variable or even a config variable ($cf[search][submit]).
Now what about upgrading 1.6.0 -> 1.6.1?
We cannot simply overwrite the old language files, as that would deleate user defined settings. Maybe the xxconfig.php language files weren't all that stupid after all, as they usually contained the user defined strings while the standard language file could have been easily exchanged.

maybe we should even switch to type="search"

Does it make any real difference in present browsers yet?

[cmb]

So this would add a language variable or even a config variable ($cf[search][submit]).
Now what about upgrading 1.6.0 -> 1.6.1?
We cannot simply overwrite the old language files, as that would deleate user defined settings.

Even if it requires a new language variable or a new config option that's not a big problem, IMO, as we have the language and config default files.

Maybe the xxconfig.php language files weren't all that stupid after all, as they usually contained the user defined strings while the standard language file could have been easily exchanged.

I don't think the LANGconfig files have been a stupid idea, but they have not been thought through. On one hand, there never has been an equivalent for the plugins (why not, if it was an important concept), and on the other hand, it's sometimes unclear where to put some strings. Consider the template texts for instance: actually those are localizations, but they were stored in the language configuration. And meta_codepage was stored in the language file, despite it's a (language dependent) configuration option. And what about lastupdate_dateformat?

maybe we should even switch to type="search"

Does it make any real difference in present browsers yet?

The difference might be theroretical, but at least the HTML 5 CR says:

The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.

[svasti]

improve the searchbox for XH 1.6.1 (to not further postpone the release of 1.6). For one thing it would be nice if it was possible to set the placeholder attribute

what about compatibility with old templates? To keep this, we could leave searchbox() for some time as it is, and add a more modern version (with looking glas symbol and placeholder attrib) as searchfield().

Anyhow I always found the existing searchbox problematic from the point of view of design. The submit button often wouldn't easily align with the text input field, and when I succeeded with tricky css, it loocked different in IE and Firefox .
Much nicer to get a new searchfield().

[cmb]

what about compatibility with old templates? To keep this, we could leave searchbox() for some time as it is, and add a more modern version (with looking glas symbol and placeholder attrib) as searchfield().

Actually, I don't see real compatibility issues with existing templates, at least regarding the placeholder. Removing the div element might cause some templates to break, though, so in this case another function seems to be a good idea.

A looking glass is fine by me, if we stick to neutral icon (i.e. grayscale, and rather stylized). Anyway, do you want to use it for the text input or the button (both options might be reasonable).

The submit button often wouldn't easily align with the text input field, and when I succeeded with tricky css, it loocked different in IE and Firefox .

Um, isn't it sufficient to give the inputs the same height and vertical margin? That should work for all browsers implementing the W3 box modell (IE 6+ and other modern browsers; not to say that I consider IE 6-8 modern browsers). Or do you mean the horizontal alignment?

[Holger]

so in this case another function seems to be a good idea.

Hmm, I don't think that it's a good idea to provide a second or third template-tag for the same function.
If it's no option to change the default core function for compatibility reasons and the given code is not flexible enough, the template-designer could easy include his own form with a few lines

I've made that, for example, at my plugin page:

Code: Select all

<div id="search">
    <form method="post" id="searchform" action="index.php">
        <input id="searchfield" type="text" name="search" value="<?php echo $tx['title']['search'] ?>..." onfocus="if (this.value == '<?php echo $tx['title']['search'] ?>...') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php echo $tx['title']['search'] ?>...';}" />
        <input type="hidden" name="function" value="search" />
    </form>
</div>

Code: Select all

#search {
    float: right;
}
#search form {
    margin: 0;
    padding: 5px 21px 0 0;
}
#searchfield {
    width: 165px;
}
#searchform input {
    background-color: #F8F8F8;
    background-image: url("images/search.gif");
    background-position: left 1px;
    background-repeat: no-repeat;
    border: 1px solid #C0C0C0;
    cursor: text;
    padding-left: 17px;
}
#searchform input:hover {
    border: 1px solid #FF7900;
}
#searchform input:focus {
    background-color: #FFFFFF;
    border: 1px solid #FF7900;
}

[svasti]

What about a new searchbox that can be switched to the old one by

Code: Select all

<?php echo searchbox("submit");?>

or even

Code: Select all

<?php echo searchbox(1);?>

[svasti]

just in the process of voting...

I'd propose to use the search function as it is now in cmsimple-xh.org, which is a combination of Holgers, cmb's suggestions. I used it on several other templates and it looks much better than the old one. Works with IE also.

[cmb]

After reconsideration, I don't think it's the best idea to add default styling for the front-end[1]--after all that is the domain of the template, and the "new" searchbox might not suit all (existing) templates well. Even more so I am reluctant to add behavior (i.e. JS) to the front-end, especially when this behavior is hard-coded in the HTML.

I would prefer some detailed documentation regarding the styling of the searchbox, preferably with some concrete examples. This might be interesting for template designers as well, who could deliver interesting variants.

[1] If I'm not mistaken the only other styling that might affect the front-end is for the messages (cmsimplecore_warning and the new alternatives). Even this is arguable; however, it serves an important purpose for the back-end, and most (if not all) templates don't add rules for the messages.

[svasti]

I don't think it's the best idea to add default styling for the front-end

+1

the "new" searchbox might not suit all

wasn't it your idea?

So we should not rush into it. And even now interesting variants are possible with a little extra code.