html/javaScript验证输入并继续到下一页

我是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>

我看到您在那里有主要问题。由于您是新手，我会给您一些快速的奖励提示。我希望你玩得开心。在几个月内，如果您继续练习，您将非常精通。

这是您的代码，我会告诉您我更改了什么：

<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"现在如何大写。通常，我们将帖子大写并获得方法，但不是必需的。
我将您的提交按钮作为按钮。请注意类型="提交"及其在表单内部的方式。它是其父母形式的子元素。人们将其称为更"语义"，这意味着它对实际含义更精确，并且在计算机读取您的代码时与某些关系。它可以帮助他们和残疾人了解您的代码的含义。

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

修改第一个形式的打开标签为：

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

删除第一个表单的关闭标签和第二个表单的开头标签，因此您有：

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

这样，您最终会以一个表单，其中具有字段，选择和提交输入。

相关内容

最新更新

热门标签：