Question

我是html / js的新手所以请耐心等待。我正在尝试创建一个只接受某些类型输入的html表单。我可以让它自己工作但是当我尝试添加一个“继续”按钮，将它带到下一页时，它基本上忽略了所有的规定，只是自动进入下一页。非常感谢任何帮助！

<html>
<body>

<head>
<h1>
Validation Form
</h1>
</head>



<form name="myform"
method="post">

First Name: <input id="fname" type = "text" pattern="[a-zA-Z0-9]+" required 
name = "Fname">
<br> <br>
Last Name: <input id="lname" type = "text" pattern="[a-zA-Z0-9]+" required 
name = "Lname">


<br> <br>



Gender

<select>
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<br> <br>

State

<select>
<option value="california">California</option>
<option value="florida">Florida</option>
<option value="newyork">New York</option>
<option value="texas">Texas</option>
<option value="hawaii">Hawaii</option>
<option value="washington">Washington</option>
<option value="colorado">Colorado</option>
<option value="virginia">Virginia</option>
<option value="iowa">Iowa</option>
<option value="arizona">Arizona</option>
</select>

<br> <br>



</form>
<form action="validation2.html">
<input type="submit" value="Continue" />
</form>


</body>
</html>

Answer 1

我看到你在那里遇到了主要问题。既然你是新人，我会给你几个快速奖金提示。我希望你玩得开心。如果你继续练习，几个月后你就会非常精通。

这是你的代码，我会告诉你我改变了什么：

<html>
    <head>
        <title>Cool Title</title>
    </head>
    <body>
        <h1>Validation Form</h1>

        <form name="myform" method="POST" action="validation2.html">

            First Name:
            <input id="fname" type="text" pattern="[a-zA-Z0-9]+" required name="Fname">
            <br><br>

            Last Name:
            <input id="lname" type="text" pattern="[a-zA-Z0-9]+" required name="Lname">
            <br><br>

            Gender
            <select>
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
            <br><br>

            State
            <select>
                <option value="california">California</option>
                <option value="florida">Florida</option>
                <option value="newyork">New York</option>
                <option value="texas">Texas</option>
                <option value="hawaii">Hawaii</option>
                <option value="washington">Washington</option>
                <option value="colorado">Colorado</option>
                <option value="virginia">Virginia</option>
                <option value="iowa">Iowa</option>
                <option value="arizona">Arizona</option>
            </select>
            <br><br>

            <button type="submit">Submit</button>
        </form>
    </body>
</html>

请注意我如何将<body>更改为</head>之后的开始。必须是这样的。首先是头部，然后是身体，都在html标签内。
我添加了标题标记，因此您可以在浏览器标签中添加标题。
通过向您展示父/子关联如何工作以及相关项目相互关联的方式，我提高了代码的可读性。这是主观的，所以你完全可以自由地看到你想要的东西，但这是更有经验的人会做的事情。
注意method="POST"现在如何大写。通常，我们将POST和GET方法大写，但不是必需的。
我将提交按钮设为按钮。注意类型=＆＃34;提交＆＃34;以及它在表格中的表现。它是父表单中的子元素。人们会更多地称之为语义＆＃34;，这意味着它的实际意义更加精确，并且它对计算机读取代码的时间有一定的影响。它可以帮助他们和残疾人了解您的代码意味着什么。

Answer 2

问题是您的提交输入是提交第二个表单而不是第一个具有限制的输入字段的表单。

将第一个表单开始标记修改为：

<form name="myform" method="post" action="validation2.html">

删除第一个表单的结束标记和第二个表单的开始标记，以便：

    <input type="submit" value="Continue" />
</form>

这样，您最终会得到包含字段，选择和提交输入的一个表单。

HTML / Javascript验证输入并继续下一页

2 个答案: