Home > Web Front-end > HTML Tutorial > Search box options, how to convert input form into select form_html/css_WEB-ITnose

Search box options, how to convert input form into select form_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:51:40
Original
1646 people have browsed it

The code is as follows

<form name=bf onSubmit="bottomForm();return false;">    <script>  function bottomForm(){  var $=document.bf.key.value;  if(document.bf.sto[0].checked)window.open("http://xxx/index.php?s=vod-search-wd-"+$,"a1");  if(document.bf.sto[1].checked)window.open("http://xxx/?cat=103&s="+$,"a2");  if(document.bf.sto[2].checked)window.open("http://xxx/?cat=1&s="+$,"a3");  return false}  </script>   <div class="form">  <h4>搜索</h4>  <input name=sto type=radio value="0" checked=true>动画 <input name=sto type=radio value="1">萌化 <input name=sto type=radio value="2">资讯</a> <input name="key" class="search-keyword" value="(输入搜索内容……)" onfocus="if(this.value=='(输入搜索内容……)'){this.value='';}"  onblur="if(this.value==''){this.value='(输入搜索内容……)';}">  <button type="submit" class="search-submit">搜索</button>  </div>  </form> 
Copy after login

How to convert it into the following image style:


Reply to discussion (solution)

<form name=bf onSubmit="bottomForm();return false;">    <script>  function bottomForm(){  var $=document.bf.key.value;  if(document.bf.sto.selectedIndex==0)window.open("http://xxx/index.php?s=vod-search-wd-"+$,"a1");  if(document.bf.sto.selectedIndex==1)window.open("http://xxx/?cat=103&s="+$,"a2");  if(document.bf.sto.selectedIndex==2)window.open("http://xxx/?cat=1&s="+$,"a3");  return false}  </script>   <div class="form">  <h4>搜索</h4> <select name="sto">	<option value="0" selected="selected">动画</option>	<option value="1">萌化</option>	<option value="2">资讯</option></select><input name="key" class="search-keyword" value="(输入搜索内容……)" onfocus="if(this.value=='(输入搜索内容……)'){this.value='';}"  onblur="if(this.value==''){this.value='(输入搜索内容……)';}">  <button type="submit" class="search-submit">搜索</button>  </div>  </form> 
Copy after login

Directly change to select tag

Directly change to select tag


That will also change, but I don’t know how to do it with js.... .
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template