1. 首页
  2. 问题列表
  3. html表单输入文本并在同一行提交
提问者：小点点

html表单输入文本并在同一行提交


我创建了一个表单。在其中，我需要在同一行添加textbox和submit按钮。

<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>

共1个答案

匿名用户

看来你在使用引导程序。

将这两个元素包装在行中，并使用列结构。必要时调整填充/边距。有关更多信息，请查看网格系统上的引导文档: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中有一个用于控制元素填充的类:

https://getbootstrap.com/docs/4.4/utilities/spacing/

例如，您可以将类P-0添加到按钮，它将消除元素上的填充

相关问题