html 形成输入文本并在同一行提交
html form input text and submit on same line
我创建了一个表单。在那里,我需要在同一行添加文本框和提交按钮。
<div class="input-group">
<form action="searchresult.php" method="post">
<input type="text" name= "searchtext" class="form-control" placeholder="Search">
<button class="btn btn-secondary" type="submit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414
1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5
6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</button>
</form>
</div>
您似乎在使用 bootstrap。
将两个元素包裹在row
中,并使用column
结构。必要时调整 padding/margins。有关详细信息,请查看网格系统上的 bootstrap 文档:https://getbootstrap.com/docs/4.0/layout/grid/
<div class="input-group">
<form action="searchresult.php" method="post">
<div class="row>
<div class="col-lg-6">
<input type="text" name= "searchtext" class="form-control" placeholder="Search">
</div>
<div class="col-lg-6">
` <button class="btn btn-secondary" type="submit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414
1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5
6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</button> `
</div>
</div>
</form>
</div>
列的总和需要达到 12,因此您可以根据需要更改它。
col-lg-4
为输入
col-lg-8
按钮
或者你想做的其他事情。如果你需要更多地调整间距,我认为在 Bootstrap 4 中有一个 class 用于控制元素上的填充:
https://getbootstrap.com/docs/4.4/utilities/spacing/
例如,您可以将 class p-0
添加到按钮,这将消除元素上的填充
我创建了一个表单。在那里,我需要在同一行添加文本框和提交按钮。
<div class="input-group">
<form action="searchresult.php" method="post">
<input type="text" name= "searchtext" class="form-control" placeholder="Search">
<button class="btn btn-secondary" type="submit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414
1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5
6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</button>
</form>
</div>
您似乎在使用 bootstrap。
将两个元素包裹在row
中,并使用column
结构。必要时调整 padding/margins。有关详细信息,请查看网格系统上的 bootstrap 文档:https://getbootstrap.com/docs/4.0/layout/grid/
<div class="input-group">
<form action="searchresult.php" method="post">
<div class="row>
<div class="col-lg-6">
<input type="text" name= "searchtext" class="form-control" placeholder="Search">
</div>
<div class="col-lg-6">
` <button class="btn btn-secondary" type="submit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414
1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5
6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
</svg>
</button> `
</div>
</div>
</form>
</div>
列的总和需要达到 12,因此您可以根据需要更改它。
col-lg-4
为输入
col-lg-8
按钮
或者你想做的其他事情。如果你需要更多地调整间距,我认为在 Bootstrap 4 中有一个 class 用于控制元素上的填充:
https://getbootstrap.com/docs/4.4/utilities/spacing/
例如,您可以将 class p-0
添加到按钮,这将消除元素上的填充