HTML表格未显示‘First name’输入框问题求助

嘿，我瞅了下你这段截断的代码，大概率是标签没写完整或者语法错误导致第一个输入框没渲染出来！你贴的代码到<table>之后就断成<l...>了，估计是表格行/单元格标签或者<label>没写完，浏览器解析出错就把第一个输入框给“吞”了。

修正后的完整代码 #

<html>
<head>
    <title>Holiday Program</title>
</head>
<body style="background-color:cyan">
    <form action="HolidayChoice.jsp"> <!--also try this with method="post"-->
        <center>
            <table style="background-color:lightblue">
                <!-- 第一个输入框的表格行 -->
                <tr>
                    <td>
                        <label for="firstName">First name:</label>
                    </td>
                    <td>
                        <input type="text" name="firstName" id="firstName">
                    </td>
                </tr>
                <!-- 第二个输入框的表格行 -->
                <tr>
                    <td>
                        <label for="surname">Surname:</label>
                    </td>
                    <td>
                        <input type="text" name="surname" id="surname">
                    </td>
                </tr>
                <!-- 提交按钮行 -->
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="Submit">
                    </td>
                </tr>
            </table>
        </center>
    </form>
</body>
</html>

问题原因分析 #

• 标签不完整/未闭合：你原来的代码截断处应该是第一个输入框所在的<tr>/<td>或者<label>标签没写完，浏览器自动解析时会忽略掉语法错误的部分，只渲染后面正常的surname输入框。
• 标签拼写错误：如果不小心把<label>写成<lable>这类错误标签，也会导致浏览器无法识别，进而不渲染对应元素。

你可以把这段修正后的代码运行试试，两个输入框应该都能正常显示了~

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