Siteserver <:searchInput>自定义显示样式

我们在做网站时，大部分都需要自定义搜索框样式，而Siteserver CMS的stl:searchInput 是支持自定义显示样式：
自定义搜索表单显示样式需要在<stl:searchInput>中嵌入自定义搜索项。

注意:

    <stl:searchInput>内必须包含一个id="word"的<input type="text">标签，用于显示搜索框。
    <stl:searchInput>内可以包含一个id="channelID"的<select> 下拉框，用于指定需要搜索的栏目，同时<select id="channelID"可以<option>子元素，用于指定特定的栏目进行搜索，如<option value="栏目名称">栏目名称</option>；如果<select>不包含任何<option>，系统将显示所有栏目。
    <stl:searchInput>内可以包含一个id="type"的<select> 下拉框，用于指定搜索的类型，如搜索标题、搜索内容正文等；同时<select id="type"可以<option>子元素，用于指定特定的类型进行搜索，如<option value=""Title"">标题</option>，其中value为内容表中对应的字段名称；如果<select& gt;不包含任何<option>，系统将显示标题和内容正文。
    <stl:searchInput>内可以包含id="dateFrom"及id="dateTo"的文本提交框，如<input type="text" id="dateFrom" />；dateFrom代表内容添加的最早日期，dateTo代表内容添加的最晚日期，搜索结果将显示在此范围内符合条件的内容。
    <stl:searchInput>内必须包含id="submit"的<button>、<input>或<a>元素，如<input type="button" id="submit" value="搜 索" />，用于提交搜索表单。
    <stl:searchInput>中除表单元素外可以添加任意Html元素，用于组织表单样式。

stl:searchInput 示例

示例一：采用默认方式进行搜索

<stl:searchInput></stl:searchInput>  
<stl:searchInput></stl:searchInput>

示例二：在后台中自定义搜索框样式

<stl:searchInput styleName="自定义样式"></stl:searchInput>  
<stl:searchInput styleName="自定义样式"></stl:searchInput>

示例三：采用自定义方式进行搜索

<stl:searchInput searchUrl="@/utils/search.html">  
    查询关键字：  <input type="text" id="word" />     
    <INPUT id="submit" value="搜 索" />  
</stl:searchInput>  
<stl:searchInput searchUrl="@/utils/search.html">
 查询关键字：  <input type="text" id="word" />  
    <INPUT id="submit" value="搜 索" />
</stl:searchInput>

示例三的页面效果如图：



部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！