HTML-----表单和表单元素_表单与表单元素-优快云博客

本文链接：https://blog.youkuaiyun.com/gdnlnsjd/article/details/118673728

本文详细介绍了HTML表单的action、method属性选择，包括get和post的区别，以及各种表单元素如input、radio、checkbox、select、textarea的使用方法和安全特性。重点讲解了单选和多选按钮，以及文件上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单form
action:表单提交的位置，可以是网址，也可以是一个请求处理的地址
method:post,get两者提交方式
get:可以直接在url中看到我们提交的信息，不安全，但是高效；
post:比较安全，用于传输大文件

表单元素input
type:元素类型；text文本框，password密码框，checkbox多选框，radio单选框，submit提交，reset重置，file文件
hidden隐藏，image图片，button按钮，默认为text;
name:表单元素的名称，表单提交之后要通过name才能获取相应的值
value:元素的初始值，当type为radio时必须指定一个值
size:指定表单元素（输入框）的长度
maxlength:输入框内输入的最大字符数
checked:type为radio或checkbox时，指定按钮是否被选中

单选框radio
name:同属一组的单选框的name要相同
value：radio的每个选项必须为其指定值
checked：设置一开始就被选中

多选框checkbox
name:同属一组的name没有强制要求相同，但尽量还是保持一致
value:选项初始值
checked：设置一开始就被选中

按钮button
button；普通按钮
image：图片按钮（具有submit的功能）
submit:提交按钮
reset：重置按钮

下拉框select
option：列表选项
value：该选项对应的值
selected：设置一开始就被下拉框选中

文本域textarea(textarea不是input中的一种type)
cols:列数（长度）
rows:行数（宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="我的第一个页面.html" method="post">
    <p>账号:<input type="text" name="username" value="549392386"></p>
    <p>密码:<input type="password" name="password"></p>

    <p>性别：
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="gril" >女
    </p>

    <p>爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code">敲代码
        <input type="checkbox" name="hobby" value="read">看书
        <input type="checkbox" name="hobby" value="game">玩游戏
    </p>

    <p>普通按钮：
        <input type="button" name="bt1" value="普通按钮">
    </p>

    <p>图片按钮：
        <input type="image" src="../resouce/image/play.png" width="150" height="=150">
    </p>

    <p>国家：
        <select name="country" >
            <option value="china">中国</option>
            <option value="india">印度</option>
            <option value="japan">日本</option>
            <option value="us" selected>美国</option>
        </select>
    </p>

    <p>意见反馈：
        <textarea name="textarea"  cols="50" rows="10" ></textarea>
    </p>

    <p>
        <input type="file" name="file">
    </p>

    <p>
        <input type="submit" >
        <input type="reset" >
    </p>
</form>
</body>
</html>

页面效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210712140437320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dkbmxuc2pk,size_16,color_F

在这里插入图片描述