Web编程作业求助：仅用HTML和CSS创建字符带方框的表单输入

Got it, let's solve this! You need a form input that visually looks like multiple separate boxes, but uses just one <input> element—no JavaScript allowed. This is totally achievable with smart HTML structure and CSS tricks. Here's a step-by-step implementation:

Step 1: Basic HTML Structure #

We'll use a single <input> wrapped in a container to control positioning. We'll add attributes to restrict input length and validate content (adjust the maxlength and pattern to match your needs):

<div class="split-input-container">
  <input 
    type="text" 
    maxlength="4" 
    pattern="[0-9]{4}" 
    placeholder="1234" 
    class="split-input"
    required
  >
</div>

Step 2: CSS to Simulate Multiple Boxes #

The magic happens here—we'll use CSS background gradients to draw the "box" dividers, and adjust letter spacing to make each character sit neatly in its own visual box:

.split-input-container {
  position: relative;
  width: fit-content;
  margin: 20px;
}

.split-input {
  width: 180px; /* 4 boxes × 45px each */
  height: 56px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 36px; /* Creates space between characters to match box width */
  padding-left: 18px; /* Fine-tunes alignment for the first character */
  box-sizing: border-box;
  /* Gradient to draw vertical dividers between boxes */
  background-image: linear-gradient(to right,
    transparent 0%, transparent 43px,
    #e0e0e0 43px, #e0e0e0 45px,
    transparent 45px, transparent 88px,
    #e0e0e0 88px, #e0e0e0 90px,
    transparent 90px, transparent 133px,
    #e0e0e0 133px, #e0e0e0 135px,
    transparent 135px, transparent 180px
  );
}

/* Fix placeholder spacing so it doesn't inherit the letter-spacing */
.split-input::placeholder {
  letter-spacing: 0;
  color: #bdbdbd;
}

/* Enhance focus state for better UX */
.split-input:focus {
  border-color: #2196F3;
  background-image: linear-gradient(to right,
    transparent 0%, transparent 43px,
    #2196F3 43px, #2196F3 45px,
    transparent 45px, transparent 88px,
    #2196F3 88px, #2196F3 90px,
    transparent 90px, transparent 133px,
    #2196F3 133px, #2196F3 135px,
    transparent 135px, transparent 180px
  );
}

How It Works #

• Single Input: All user input is captured in one <input> element, so form submission is straightforward—just grab the value of this input.
• Visual Boxes: The background-image gradient draws thin vertical lines to mimic separate boxes. Adjust the pixel values if you want wider/narrower boxes.
• Character Alignment: letter-spacing pushes each character apart so they sit perfectly within each visual box. The padding-left fixes alignment for the first character.
• Input Restrictions: maxlength limits the number of characters, and pattern ensures only valid characters (numbers in this example) are entered.

Customization Tips #

• Change maxlength and adjust the CSS width/gradient positions to add more/fewer boxes.
• Swap type="text" with type="password" if you need a PIN input that hides characters.
• Modify colors, border-radius, and font sizes to match your design system.

This approach keeps things clean, accessible, and avoids any JavaScript—perfect for your web programming assignment requirements!

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