以 Bootstrap 形式创建或提问，以获得更好的用户体验

7bsow1i6 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(200)

我正在构建一个使用form-group和row的用户表单。我想看看当你想让用户理解这是一个or时，你们在使用什么选项？这两个问题不是必需的，但它们只需要在其中一个问题下

<div class="form-group row">
  <label for="enteredLink">Enter Link</label>
  <input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>

<div class="form-group row">
  <label for="enteredFile">Upload File</label>
  <input class="form-control" id="txtFile" name="enteredFile" type="text" value="">
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73170078/creating-or-question-in-bootstrap-form-for-better-user-experience

2条答案

按热度按时间

xggvc2p61#

也许像这样的东西可以工作。有两个输入文件和文本。这使得很明显，用户需要选择一个或另一个。
第一个
最后，我注意到您将ID命名为txtFile和txtLink。如果您希望限制文件输入，还可以添加accept=".txt"，这样用户只能上传.txt文件。

赞(0）回复(0）举报 2022-12-08

elcex8rz2#

这可能看起来有点过于简单，但是您是否考虑过一个简单的文本"or“

<div class="container">
<div class="form-group row">
  <label for="enteredLink">Enter Link</label>
  <input class="form-control" data-val="true" id="txtLink" name="enteredLink" type="text" value="">
</div>
<div class="row"><p>or</p></div>
<div class="form-group row">
  <label for="enteredFile">Upload File</label>
  <input class="form-control" id="txtFile" name="enteredFile" type="file" value="">
</div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

这并不完全相同，但这是英国政府设计系统对相互排斥的单选按钮组所做的-https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider
编辑-突出显示SO使用的替代项
在发布这个问题的时候，我意识到StackOverflow自己做的事情和你想做的很相似。他们本质上使用了一个所有功能都在一个框中的清晰操作，可以拖放、浏览或粘贴链接