HTML5：表单

最新推荐文章于 2025-04-05 21:51:03 发布

EX_C

最新推荐文章于 2025-04-05 21:51:03 发布

阅读量932

点赞数 17

文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/2401_84309743/article/details/142706974

版权

一、表单标签

1.语法格式：

<form name="表单名" action="URL" method="get/post">表单内容</form>

① name：表单的名字，在一个网页中用于唯一识别一个表单

② action：表单的处理方式，指定表单数据提交的目的地址

③ method：表单数据的传送方向，决定数据提交的方式，常用“get”和“post”，默认用“get”

2.< input >元素

（1）语法格式：

<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y">

① type：指定要加入表单项目的类型（text、password、number等）

② name：该表单的控制名，主要在处理表单的作用

③ size：输入字段中的可见字符宽度

④ maxlength：允许输入的最大数目

⑤ checked：页面加载时是否预先选择该input元素

（2）< input >元素中 type属性的类型

①文字和密码的输入

<form action="">
        姓名：<input type="text" name="文本框名"><br>
        密码：<input type="password" name="密码框名">
</form>

运行结果如下：

、

②重置和提交

<form action=""> 
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
</form>

运行结果如下：

③复选框和单选框

<form action=""> 
        性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女    <br>
        爱好：<input type="checkbox" name="hobby" value="唱歌">唱歌
        <input type="checkbox" name="hobby" value="跳舞">跳舞
        <input type="checkbox" name="hobby" value="打篮球">打篮球
</form>

运行结果如下：

3.选择栏< select >

语法格式：

<form action=""> 
        <select name="控制操作名" size="x">
            <option value="">...</option>
            <option value="">...</option>
            ...
        </select>
</form>

代码片段如下：

<form action=""> 
    学历：
        <select name="学历">    <!--没有设置size值，默认一次显示列表项数为1-->
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="研究生">研究生</option>
        </select>
</form>

运行结果如下：

3.多行文本域< textarea >...< /textarea >

语法格式：

<form action="">
    <textarea name="文本域名" rows="行数" cols="列数">
        初始文本内容
    </textarea>
</form>

代码片段如下：

<form action="">
        <p>评论</p>
        <textarea name="评论" rows="5" cols="30">
            请发表你的评论......
        </textarea>
</form>

运行结果如下：

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>   
    <form action="" name="form1" method="post">
        姓名：<input type="text" name="姓名"><br>
        密码：<input type="password" name="密码"><br>
        性别：<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
        <br>
        学历：
            <select name="学历">    <!--没有设置size值，默认一次显示列表项数为1-->
                <option value="大专">大专</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
            </select>
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="唱歌">唱歌
        <input type="checkbox" name="hobby" value="跳舞">跳舞
        <input type="checkbox" name="hobby" value="打篮球">打篮球
        <br>
        <p>建议：</p>
        <textarea name="评论" rows="5" cols="30">
            请发表你的建议......
        </textarea>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

运行结果如下：