Question

我有一个表单，我可以点击文本框并从其行的任何位置提交按钮，而不仅仅是文本框或提交按钮本身。

请帮助我，这让我通过点击空白区域意外地按下了一些东西：

<form method="POST" action="">
    <label>
        <input type="file" name="file" class="custom-file-input">
    </label>
    <label>
        <input name="theirname" type="text" placeholder="What's your name?">
    </label>
    <label>
        <button name="buttonname">Submit</button>
    </label>
</form>

Answer 1

听起来您的标签已设置为display:block - 并且因为它们正在封装您的字段控件，请点击该行的任意位置（因为标签是＆＃39;占据＆＃39;全宽）将集中控制。

因此，请更改代码，将标签更改为display:inline-block，以便停止占用“全宽”标签。然后使用br分隔html中的每一行：

＆＃13;

label{
  display:inline-block;
}

＆＃13;

<form method="POST" action="">
    <label>
        <input type="file" name="file" class="custom-file-input">
    </label><br />
    <label>
        <input name="theirname" type="text" placeholder="What's your name?">
    </label><br />
    <label>
        <button name="buttonname">Submit</button>
    </label>
</form>

＆＃13;

Answer 2

您的标签正在包装您的输入。通常，标签可以让您更轻松地选择输入。例如，复选框或单选按钮。单击标签中包含的文本，它将选择与标签关联的输入：

<form method="POST" action="">
    <label for="file">File</label>
    <input type="file" name="file" class="custom-file-input" id="file">
    <label for="theirname">Name</label>
    <input name="theirname" type="text" placeholder="What's your name?" id="theirname">
    <label for="submit">Submit</label>
    <button name="buttonname">Submit</button>
</form>

编辑您的意图（使用CSS向左浮动等）。我将它应用于div包装器，但您只能将它应用于输入：

    #float-my-boat input,
    #float-my-boat button {
    	float: left;
    	clear: both;
    	display: inline-block;
    	padding: 5px 8px;
    	font-size: 18px;
    	color: #666;
    	margin: 10px 0;
    	border: 1px solid #CCC;
    	border-radius: 6px;
    	box-shadow: inset 1px 1px 4px #888;
    }

    <div id="float-my-boat">
    <form method="POST" action="">
        <input type="file" name="file" class="custom-file-input" id="file">
        <input name="theirname" type="text" placeholder="What's your name?" id="theirname">
        <button name="buttonname">Submit</button>
    </form>
    </div>

为什么我的元素可以在他们的任何地方选择？怎么修？

2 个答案: