如何在HTML表格中的图片上方放置输入框并通过表单获取文本？

First, let's break down solutions to your two questions with practical code examples based on your existing table structure:

1. Placing an Input Box Above the Image #

You have two common approaches here, depending on whether you want the input stacked above the image (in the page flow) or overlayed directly on top of it:

Option A: Stacked Input (Above Image in Flow) #

Modify the <td> containing your image to include the input element before the image. Add basic styling to align it with the image's width and add spacing:

<tr>
  <td colspan="13" style="padding-bottom: 8px;">
    <!-- Input box placed above the image -->
    <input type="text" id="imageInput" name="imageInput" style="width: 1200px; padding: 4px; box-sizing: border-box;">
    <!-- Original image -->
    <img src="images/WebDesign_32.png" width="1200" height="24" alt="" class="texxt">
  </td>
  <td>
    <img src="images/spacer.gif" width="1" height="24" alt="">
  </td>
</tr>

Option B: Overlayed Input (On Top of the Image) #

If you want the input to sit directly over the image (like a text overlay), use CSS positioning. Set the parent <td> to position: relative, then the input to position: absolute:

<tr>
  <td colspan="13" style="position: relative; height: 24px;"> <!-- Match image height -->
    <!-- Input overlayed on the image -->
    <input type="text" id="imageInput" name="imageInput" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: transparent; padding: 0 4px; box-sizing: border-box;">
    <!-- Original image (stays behind the input) -->
    <img src="images/WebDesign_32.png" width="1200" height="24" alt="" class="texxt">
  </td>
  <td>
    <img src="images/spacer.gif" width="1" height="24" alt="">
  </td>
</tr>

2. Retrieving the Input Text via a Form #

To capture the input's value, wrap your input (and related table content) inside a <form> element. Specify where the data should be sent (action) and the HTTP method (method):

<form action="/your-handler-script" method="POST"> <!-- Replace with your server endpoint -->
  <tr>
    <td colspan="13" style="padding-bottom: 8px;">
      <input type="text" id="imageInput" name="imageInput" style="width: 1200px; padding: 4px; box-sizing: border-box;">
      <img src="images/WebDesign_32.png" width="1200" height="24" alt="" class="texxt">
    </td>
    <td>
      <img src="images/spacer.gif" width="1" height="24" alt="">
    </td>
  </tr>
  <!-- Add a submit button (style it to match your design) -->
  <tr>
    <td colspan="14" style="padding-top: 8px;">
      <button type="submit">Submit Text</button>
    </td>
  </tr>
</form>

Key Tips: #

• The name attribute on the input (name="imageInput") is essential—your server-side script will use this to access the input value.
• Replace /your-handler-script with the actual URL of your server endpoint (e.g., a PHP, Node.js, or Python script) that processes the form data.
• If you don't want a visible submit button, you can trigger form submission via JavaScript (e.g., on enter key press or a custom button click).

内容的提问来源于stack exchange，提问作者midhunsivarajan