HTML学习：表单

keer_zu · 发表于 2021-3-5 16:00

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

        <form>

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

<div id="app">

  <p>{{ message }}</p>

</div>



<script>

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

</body>

</html>

复制

<!DOCTYPE html>

<html>

<body>



<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form> 



</body>

</html>

单选按钮显示效果：

keer_zu · 发表于 2021-3-5 16:03

提交按钮

复制

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>



<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form> 



<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>



</body>

</html>

显示效果：

keer_zu · 发表于 2021-3-5 16:04

本帖最后由 keer_zu 于 2021-3-5 16:07 编辑

Action 属性
action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

复制

<form action="action_page.php">

如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

复制

<form action="action_page.php" method="GET">

或：

复制

<form action="action_page.php" method="POST">

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

keer_zu · 发表于 2021-3-5 16:17

表单属性：

HTML学习：表单

相关帖子

浏览过的版块

突出贡献奖章

沉静之湖泊

七世轮回

技术奇才奖章