联系表单原型

学习目标

• 用 form 和 input 系列标签搭建表单结构
• 用 label 的 for 属性关联输入控件，提升无障碍体验
• 用 required、type、placeholder 等属性做基础验证和提示
• 用 CSS 让表单排版整洁美观

前置要求

• 了解 HTML 基本标签
• 了解 CSS 基础样式
• 已完成前三个 Web 项目或具备同等基础

步骤

2. 1

   搭建表单结构

   创建 index.html，用 <form> 包裹整个表单。里面放姓名输入框、邮箱输入框和留言文本域。每个控件都用 <label> 关联。

   代码复制

   <form>
     <label for="name">姓名</label>
     <input type="text" id="name" name="name" required />
   
     <label for="email">邮箱</label>
     <input type="email" id="email" name="email" required />
   
     <label for="message">留言</label>
     <textarea id="message" name="message" rows="5" required></textarea>
   
     <button type="submit">发送</button>
   </form>

   预期结果

   页面显示一个包含三个字段和提交按钮的表单。

   显示提示
4. 2

   添加验证属性和提示

   给姓名加 minlength 限制最少 2 个字符，邮箱用 type=email 让浏览器验证格式，留言加 placeholder 给出填写提示。

   代码复制

   <input type="text" id="name" name="name"
     required minlength="2" placeholder="请输入你的名字" />
   
   <input type="email" id="email" name="email"
     required placeholder="例如：[email protected]" />
   
   <textarea id="message" name="message" rows="5"
     required placeholder="想说点什么？"></textarea>

   预期结果

   输入框有了占位提示，提交空表单时浏览器会提示必填。

   显示提示
6. 3

   用 CSS 美化表单

   让 label 和控件纵向排列，输入框占满宽度，加合适的内边距和边框。提交按钮用主色背景、白色文字。

   代码复制

   form {
     max-width: 480px;
     margin: 2rem auto;
   }
   
   label {
     display: block;
     margin-top: 1rem;
     font-weight: 600;
   }
   
   input, textarea {
     width: 100%;
     padding: 0.5rem;
     margin-top: 0.25rem;
     border: 1px solid #cbd5e1;
     border-radius: 4px;
   }
   
   button {
     margin-top: 1rem;
     padding: 0.5rem 1.5rem;
     background: #2563eb;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
   }

   预期结果

   表单排版整洁，输入框等宽，按钮有蓝色主题色。

   显示提示
8. 4

   测试表单验证

   在浏览器里测试：留空提交（应提示必填）、输入短于 2 个字符的姓名（应提示太短）、输入格式错误的邮箱（应提示格式不对）。确认原生验证正常工作。

   预期结果

   各种非法输入都会被浏览器拦截并给出提示，合法输入能正常提交。

   显示提示

相关资源