如何在表单内插入表格

Posted 2023-04-06

如何在表单内插入表格

<form action="xxx" method="post">
<table>
<tr>
<td>Username</td>
<td> <input type="text" name="keyWord"/>
</td>
</tr>
<tr>
<td>Password:</td>
<td> <input type="password" name="keyWord"/>
</td>
</tr>
<tr>
<td><input type="submit" value="提交" />
</td>
<td> input type="reset" value="z注销" />
</td>
</tr>

</table>
</form>
他想要这样的 参考技术A <form action="xxx" method="post">
<table>
<input type="text" name="keyWord"/>
<input type="submit" value="提交" />
</table>
</form>
你的意思是这样？

如何在输入标签内插入图标

【中文标题】如何在输入标签内插入图标

【英文标题】：How to insert icon inside input tag

【发布时间】：2021-10-21 00:03:16

【问题描述】：

我想把图标放在输入标签内，但它总是在输入的底部。我实际上使用了引导程序，但为此我使用了自定义样式

这是html：

             <div class="form-group">
                  <label for="password" class="text-secondary">Password</label>
                  <div class="input-group">
                    <input id="password" type="password" class="form-login @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                        <div class="input-group-append">
                        <span class="input-group-text" onclick="password_show_hide();">
                          <i class="fas fa-eye" id="show_eye"></i>
                          <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                        </span>
                      </div>
                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong> $message </strong>
                        </span>
                    @enderror
                  </div>
                </div>

这是css：

.form-login
    display: block;
    width:100%;
    font-size: 1rem;
    font-weight: 400;
    line-height:1.5;
    border-color: #009DA9 !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    padding: 0px !important;
    color:black;
    height: auto;
    border-radius: 0;
    background-color: #fff;
    background-clip: padding-box;



.form-login:focus

    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: none;

现在的样子：

我想要的样子：

【参考方案1】：

您可以使用绝对位置将图标定位在输入上。

您可能需要稍微更改top 值和padding-right 值。检查下面sn-p中的评论

.input-group 
  position:relative;
  display:inline-block;

.input-group-text 
  position: absolute;
  right:0;
  top: 0;


input 
  padding-right: 20px; /* = icon width if you don't want the password to go under the icon */ 
  

<div class="input-group">
   <input id="password" type="password" class="form-login" />
   <div class="input-group-append">
     <span class="input-group-text">
       <i class="fas fa-eye" id="show_eye">icon</i>

     </span>
   </div>

 </div>

【参考方案2】：

您可以使用绝对位置将图标定位在输入字段上。

  .form-group 
    width: 25%;
    position: relative;
  

  .form-group i 
    position: absolute;
    right: 5px;
  

  .icon 
    padding: 10px;
    color: grey;
    min-width: 50px;
    text-align: center;
  

  .input-field 
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border-color: solid lightgray;
  

<div class="form-group">
  <label for="passowrd">Password</label>
  <div class="input-set">
    <i class="fas fa-lock icon"></i>
    <input id="password" name="password" class="input-field" type="text" placeholder="password" />
  </div>
</div>