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

Question

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

我把文本放在下面没问题，但同时让每个输入之间的文本很难。最初我试图将它作为 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;
  }

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

Answer 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 */
}

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

How to have text in between form inputs

html

css

forms

reactjs