Day5_0422 表单form-01_< form name = "myform" action =-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52335062/article/details/124353638

一、表单标签的格式：

●name：表单提交时的名称；

●action：提交到的地址；

●method：提交方式，两个值GET和POST，默认为GET；

--GET和POST的区别：GET：默认方式直接将数据提交到相应地址，对于数据不安全；

POST：将表单中数据打包提交到相应地址，对于数据安全。

二、input：

1、type类型：

●单行文本框<input type="text" >

●密码框type="password"

●单选框type="radio"

●复选框type="checkbox"

●按钮框type="button"

●提交type="submit"（这是一个按钮，点击会将表单信息提交到指定地址）

●重置type="reset"

●文件type="file"

●隐藏type="hidden"

2、属性：

●name：关键词作用域

●value：指定表单元素的值

●checked：设置初始状态是否被选中

●placeholder：提示文本

●method：表单数据提交的方式

三、案例显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <input name="user_name" type="text" placeholder="请输入用户名">
        <br>
        <input name="pwd" type="password" placeholder="请输入密码">
        <br>
        <p>请选择您的性别</p>
        <p>
            <span>🐘</span>
            <input name="gender" type="radio" value="1">
        </p>
        <p>
            <!-- name 划定作用域，也是关键词
            checked  默认选择 -->
            <span>🦒</span>
            <input checked  value="0" name="gender" type="radio">
        </p>

        <p>您的爱好:</p> 
        <p>
            <span>阅读</span>
            <input value="阅读" name="hobby" type="checkbox">
        </p>
        <p>
            <span>旅行</span>
            <input value="旅行" name="hobby" type="checkbox">
        </p>
        <p>
            <span>冥想</span>
            <input value="冥想" name="hobby" type="checkbox">
        </p>
        <p>
            <span>烹饪</span>
            <input value="烹饪" checked name="hobby" type="checkbox">
        </p>
        <input type="submit">
    </form>
</body>
</html>

效果图：