如何在text box上方添加文本？创建带顶部标题的姓名输入框

Hey there! Creating a first name input field with a label above and a placeholder is super straightforward with HTML, and you can add a bit of CSS to make it look clean and user-friendly. Let me show you how to do this step by step:

Basic HTML Implementation #

This is the core structure you need—no styling required, just plain HTML:

<div class="form-group">
  <label for="firstName">First name</label>
  <input type="text" id="firstName" placeholder="Enter your first name">
</div>

Quick breakdown of the elements: #

• The <label> tag displays the "First name" text above the input. Using the for attribute that matches the input's id means clicking the label will focus the input field—this is a small but important accessibility detail!
• The <input> element is your text box. The placeholder attribute adds the grayed-out hint text inside the box.

Polished Version with CSS #

If you want the input to look more polished (like you'd see on most modern websites), add this CSS to style the group:

.form-group {
  margin-bottom: 1.5rem;
  width: 300px; /* Adjust width as needed */
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 1rem;
}

input[type="text"]:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

This styling will:

• Add spacing between form groups (so if you add more fields later, they don't crowd together)
• Make the label stand out with a slight font weight
• Give the input a clean, rounded border with padding for better typing space
• Add a focus state to show users when the input is active—another accessibility win!

You can tweak the colors, padding, or width to match your project's design system.

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