导航栏添加href后Grid布局变形及表单required验证失效求助

一、Grid布局错乱修复 #

问题根源 #

你添加的导航栏<a>标签未闭合，导致HTML结构解析异常，直接破坏了big-container-white的Grid布局规则。比如这段错误代码：

<li class="navMenu">
    <a style="text-decoration: none;" href="./about.html">ABOUT ME</li>

<a>标签缺少</a>闭合，浏览器会自动补全错误结构，进而打乱整个Grid布局。

修复步骤 #

给所有导航栏的<a>标签添加闭合标签，确保HTML结构完整：

<ul class="navMenu-list">
    <li class="navMenu">
        <a style="text-decoration: none;" href="./about.html">ABOUT ME</a>
    </li>
    <li class="navMenu">
        <a style="text-decoration: none;" href="./professional.html">PROFESSIONAL</a>
    </li>
    <li class="navMenu">
        <a style="text-decoration: none;" href="./academic.html">ACADEMIC</a>
    </li>
    <li class="navMenu">
        <a style="text-decoration: none;" href="./contact.html">CONTACT ME</a>
    </li>
</ul>

二、表单验证失效修复 #

问题根源 #

1. 表单控件（<input>/<textarea>）没有被包裹在<form>标签内，浏览器原生验证仅对<form>内的元素生效
2. <label>标签的ID与对应表单元素的ID重复，违反HTML ID唯一性规范

修复步骤 #

1. 用<form>标签包裹整个表单内容，可添加action（提交地址）和method（提交方式）属性，不需要后端提交的话可留空
2. 移除<label>的重复ID，保持for属性与表单元素ID一致
3. 给提交按钮添加value属性，让按钮显示明确文本

修改后的表单部分代码 #

<main>
    <form class="forms-container" action="" method="post">
        <div class="instructions">SEND ME AN EMAIL</div>
        <div class="nameForm">
            <label for="name">Name</label>
            <input required
                   id="name" 
                   name="name" 
                   type="text" 
                   placeholder="Name" 
                   style="width: 410px; padding: 10px;  border-radius: 8px; border: 1px solid; border-color: #dfdede;">
        </div>
        <div class="subject">
            <label for="subjectForm">Subject</label>
            <input required 
                   id="subjectForm" 
                   name="subjectForm" 
                   type="text" 
                   placeholder="Subject" 
                   style="width: 410px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;">
        </div>
        <div class="email">
            <label for="emailForm">Email</label>
            <input required
                   pattern='^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
                   id="emailForm" 
                   name="emailForm" 
                   type="email"
                   placeholder='Email'
                   style="width: 410px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;">
        </div>
        <div class="message">
            <label for="messageForm">Message</label>
            <textarea required 
                      id="messageForm" 
                      name="messageForm" 
                      placeholder="Message"
                      style="width: 410px; height: 100px; padding: 10px; border-radius: 8px; border: 1px solid; border-color: #dfdede;"></textarea>
        </div>
        <div class="submitButton">
            <input id="submit" type="submit" value="Send">
        </div>
    </form>
</main>

注：给<label>添加了文本内容，提升页面可访问性；原CSS中.forms-container的Grid样式依然生效，无需修改。

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