Question

有人可以告诉我，如何创建一个HTML字段，并在字段末尾附加一个下拉列表，如下图所示：click here to see an example image

我正在积极寻求你的帮助。感谢

我的尝试代码：

    <form action = "Controller" method = "GET" class="form-wrapper">

    <input type = "hidden" name="command" value="search"/>

    <input type="text" name="search" placeholder="Search for..." required class="form-control">
    <input type="submit" value="go" id="submit" class = "btn btn-primary btn-sm">

    <div style="float: left;">

        <a href="javascript:showhide('uniquename')" style="margin-left: 2px;"> search criteria </a>

        <div id="uniquename" style="display: none; float: center;">
            <select name="choice">
                <option>Document</option>
                <option>Author</option>
                <option>Writer</option>
                <option>Contributor</option>
            </select>
        </div>

    </div>

</form>

结果：enter image description here

Answer 1

你可以尝试这个：删除Style Display:none;

 <form action = "Controller" method = "GET" class="form-wrapper">

    <input type = "hidden" name="command" value="search"/>

    <input type="text" name="search" placeholder="Search for..." required class="form-control">
    <input type="submit" value="go" id="submit" class = "btn btn-primary btn-sm">

    <div style="float: left;">

        <a href="javascript:showhide('uniquename')" style="margin-left: 2px;"> search criteria </a>

        <div id="uniquename" style="float: center;">
            <select name="choice">
                <option>Document</option>
                <option>Author</option>
                <option>Writer</option>
                <option>Contributor</option>
            </select>
        </div>

    </div>

</form>

Demo here

Answer 2

你可以尝试这个

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Create a Drop Down Menu with Search Box in CSS3 and HTML</title>
	<link href="https://designmodo.com/demo/dropdown-menu-search/flatnav.css" rel="stylesheet">
		<meta name="robots" content="noindex,follow" />
</head>
<body>
	<ul class="nav">
		
		<li id="search">
			<form action="" method="get">
				<input type="text" name="search_text" id="search_text" placeholder="Search"/>
				<input type="button" name="search_button" id="search_button"></a>
			</form>
		</li>
		<li id="options">
			<a href="#">Options</a>
			<ul class="subnav">
				<li><a href="#">Document</a></li>
				<li><a href="#">Author</a></li>
				<li><a href="#">Writer</a></li>
				<li><a href="#">Contributor</a></li>
			</ul>
		</li>
	</ul>

	<script src="https://designmodo.com/demo/dropdown-menu-search/prefixfree-1.0.7.js" type="text/javascript"></script>
</body>
</html>

＆＃13;

如何创建带有附加下拉列表的html字段

2 个答案: