我写一些表单标记只是为了练习html。
但是，我不确定从父表单标记下两级嵌套表单输入字段是否仍然是有效的html标记，以便将我的数据提交到服务器。
我这样做是为了达到我想要的样式。所以我的问题是服务器是否会接收到来自每个表单字段的所有数据。请注意，我希望通过<input type="submit">按钮提交表单，我没有在下面的代码中包括这个按钮。我只是想在这样做之前确保代码是有效的。
这是密码。

<form>
    <div class="form-field">
        <label for="name">Name</label>
        <input
            type="text"
            name="name"
            id="name"
            placeholder="Your name"
            required
        />
    </div>
    <div class="form-field">
        <label for="email">Email</label>
        <input
            type="email"
            name="email"
            id="email"
            placeholder="you@company.com"
            required
        />
    </div>
    <div class="form-field">
        <label for="tel">Phone number</label>
        <div id="contact-number-container">
            <label for="country-select"></label>
            <select name="country-select" id="country-select">
                <option value="US">US</option>
                <option value="AU">AU</option>
                <option value="SG">SG</option>
                <option value="MY">MY</option>
                <option value="IN">IN</option>
                <option value="CN">CN</option>
            </select>
            <input
                type="tel"
                name="tel"
                id="tel"
                placeholder="+1 (555) 000-0000"
                required
            />
        </div>
    </div>
    <label for="story">How can we help?</label>
    <textarea
        id="story"
        name="story"
        rows="5"
        cols="33"
        placeholder="Tell us a little about the project..."
    ></textarea>
</form>;

我试图让一个选择器出现在一个“tel”类型的输入字段旁边，该字段水平并排放置，并且我将它们 Package 在一个ID为contact-number-container的容器div中。“tel”类型的输入字段的标签实际上在容器div之外。我想知道这种安排是否可以成功提交表单。（即通过`提交数据）