如何在表单输入之间添加文本答案

【问题标题】：How to have text in between form inputs如何在表单输入之间添加文本
【发布时间】：2022-01-24 20:31:43
【问题描述】：

我正在尝试制作一个包含各种输入的表单，并且在这些输入之间我想要文本。它应该是这样的：

我将文本放在下面没有问题，但同时在每个输入之间放置文本很难。最初我尝试将其作为 div 内的一系列文本区域来执行，但这使得下面的文本无法正常工作。知道我该怎么做吗？这是它目前的样子：

这是我的代码：

反应：

<form>
                                    <div id="form_fields_div">
                                        <fieldset>
                                            <input type="text" name="text_box_number_1_page_6" id="text_box_number_1_page_6" />
                                            <label for="text_box_number_1_page_6">(a feeling you don’t like) </label>
                                        </fieldset>
                                        <h2>. I do</h2>
                                    
                                    
                                        <fieldset>
                                            <input type="text" name="text_box_number_2_page_6" id="text_box_number_2_page_6" />
                                            <label for="text_box_number_2_page_6">(an activity that makes you feel better)</label>
                                        </fieldset>
                                        <h2>to make me feel less</h2>
                                    
                                    
                                        <fieldset>
                                            <input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
                                            <label for="text_box_number_3_page_6">(the feeling you don’t like)</label>
                                        </fieldset>
                                        <h2>That means that</h2>
                                    
                                
                                        <fieldset>
                                            <input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
                                            <label for="text_box_number_3_page_6">(the activity that makes you feel better)</label>
                                        </fieldset>
                                        <h2>is a coping strategy.</h2>
                                    </div>
                                </form>

和css：

form {
    width: 89.5em;
    overflow: hidden;
    
    border: none;
    
  }
   fieldset {
    display: block;
    float: left;
    width: 10em;
    margin: 0 1em 0 0;
    border: none;
    
  }
    fieldset:last-child {
    margin: 0;
  }
  
  fieldset > input,
  fieldset > label {
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: 15px;
  }
  fieldset > input {
    width: 80%;
    font-size: 25px;
  }

  #form_fields_div {
      display: inline;
      white-space: nowrap;
  }

【问题讨论】：

标签： html css reactjs forms

【解决方案1】：

您可以创建由span标签包裹的表单项，显示inline-flex和方向column在输入下显示标签

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
    />
  </head>
  <body>
    <form>
      <div id="form_fields_div">
        For example, sometimes I do feel
        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_1_page_6"
            id="text_box_number_1_page_6"
          />
          <label for="id1">(a feeling you don’t like)</label>
        </span>
        <span>. I do</span>
        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_2_page_6"
            id="text_box_number_2_page_6"
          />
          <label for="id1">(an activity that makes you feel better)</label>
        </span>

        <span>to make me feel less</span>

        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_3_page_6"
            id="text_box_number_3_page_6"
          />
          <label for="text_box_number_3_page_6"
            >(the feeling you don’t like)</label
          >
        </span>
        <span>That means that</span>

        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_3_page_6"
            id="text_box_number_3_page_6"
          />
          <label for="text_box_number_3_page_6"
            >(the activity that makes you feel better)</label
          >
        </span>
        <span>is a coping strategy.</span>
      </div>
    </form>
  </body>
</html>

【讨论】：

就是这样，谢谢！一个问题是链接样式表在这里做什么？没有它，它就不起作用，所以我很好奇是什么让这突然起作用。
实际上 React 似乎真的很讨厌外部 CSS 文件，所以我在本地进行这项工作时遇到了很多麻烦（它一直在全局应用 CSS 文件）。有没有办法获取其中的信息并只获取对此重要的东西？我不知道如何读取文件，因为它真的很糊。很抱歉问你更多，但我不知所措......
@zichyboy css module 会解决你的问题。你可以把你的 css 放在 css-file-name.module.css 里面它会在本地工作
我仍然遇到了一些问题，因为它是全局的（我想我需要对我的 webpacker/package 文件进行一些更改）但是使用带有嵌套的 SCSS/SASS 最终成为了窍门！感谢您的所有帮助！

【解决方案2】：

这是我使用的代码：

JS 文件：

import '../extcss.scss';

<form>
    <div className="extcss" id="form_fields_div">
        <p>For example, sometimes I do feel<br/><br/></p>
        <span className="inline-flex flex-col">
            <input
                onChange={event => this.handleChange(event)}
                defaultValue={this.getValue("text_box_number_1_page_6_sheet_4")}
                className="border-b border-black text_box_inputs"
                type="text"
                name="text_box_number_1_page_6_sheet_4"
                id="text_box_number_1_page_6_sheet_4"
            />
            <label for="text_box_number_1_page_6_sheet_4">(a feeling you don't like)</label>
        </span>
        <span className='side_text'>. I do&nbsp;&nbsp;</span>
        <span className="inline-flex flex-col">
            <input
                onChange={event => this.handleChange(event)}
                defaultValue={this.getValue("text_box_number_2_page_6_sheet_4")}
                className="border-b border-black text_box_inputs"
                type="text"
                name="text_box_number_2_page_6_sheet_4"
                id="text_box_number_2_page_6_sheet_4"
            />
            <label for="text_box_number_2_page_6_sheet_4">(an activity that makes you feel better)</label>
        </span>

        <span className='side_text'>&nbsp;&nbsp;to make me feel less&nbsp;&nbsp;</span>

        <span className="inline-flex flex-col">
        <input
            onChange={event => this.handleChange(event)}
            defaultValue={this.getValue("text_box_number_3_page_6_sheet_4")}
            className="border-b border-black text_box_inputs"
            type="text"
            name="text_box_number_3_page_6_sheet_4"
            id="text_box_number_3_page_6_sheet_4"
        />
        <label for="text_box_number_3_page_6_sheet_4"
            >(the feeling you don't like)</label
        >
        </span>
        <span className='side_text'>&nbsp;&nbsp;That means that&nbsp;&nbsp;</span>

        <span className="inline-flex flex-col">
        <input
            onChange={event => this.handleChange(event)}
            defaultValue={this.getValue("text_box_number_4_page_6_sheet_4")}
            className="border-b border-black text_box_inputs"
            type="text"
            name="text_box_number_4_page_6_sheet_4"
            id="text_box_number_4_page_6_sheet_4"
        />
        <label for="text_box_number_4_page_6_sheet_4"
            >(the activity that makes you feel better)</label
        >
        </span>
        <span className='side_text'>&nbsp;&nbsp;is a coping strategy.</span>
    </div>
</form>

extcss.scss：

.extcss{
  /* Code from external css file copied here */
}

【讨论】：