HTML 中的表单标签

延延oO

已于 2024-12-12 22:19:35 修改

阅读量761

点赞数 10

分类专栏： HTML 文章标签： html 前端开发语言

于 2024-12-12 18:21:21 首次发布

本文链接：https://blog.youkuaiyun.com/2403_87749312/article/details/144432916

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

表单就是一种基于生活中的清单，可以填写很多内容，提交给网络服务器处理，HTML中主要设置了两种标签

表单标签：表示了生活中的清单
表单元素标签：表示了申请单上可以填写的内容

HTML规范中提供了一些常见的表单标签如下：

首先实现的是一个账号输入框代码如下：

    <form action="#" method="get">   
        <label for="zhanghao">账号：</label>
        <input type="text" id="zhanghao" name="zhanghao"/> <br>
    </form>

网页效果：

那么下面将分析这三行代码中的标签：那么这里的 “id” 就像我们的身份证一样 for 与id 组合在一起那就是说这个框给的提示是输入账号。

<form></form> 表单标签表单的开始所有表单内容都包含在这里面！
- method属性：提交方式，默认 get

- action属性：提交给谁处理；默认 #

<label><label/> 表单中的提示信息 比如我们登录CSDA的时候要输入账号和密码 那么这个地方的账号和密码便是由这个标签实现

<input type="text"/> 单行文本输入框就是输入账号的那个框

那么在<input type="text"/>这个基本的标签页上面可以延申出许许多多的各种标签页也就是有输入密码变成一个小原点还有日期选择框地址选择框....

<input type="password"/> 密码输入框

<input type="file"/> 文件输入框

<input type="reset"/> 重置键可以快速清空表单中数据

<input type="sumbit"/> 提交键我们输完密码后不都会提交嘛

<input type="email"/> 邮箱输入框就是必须按照邮箱格式输入否则重新输入

<input type="date"/> 日期输入框

<input type="color"/> 颜色选择框

<input type="ulr"/> 网址输入框

<input type="button"/> 普通按钮

<input type="imag"/> 图片按钮

...

下面是一些标签页的运用及其网页效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员 - 增加用户</title>
</head>
<body>
    <h3>管理员 - 添加会员</h3>
    <!-- 
    form：创建一个表单
    - action:表示提交给谁处理，#表示当前网页自己
    - method:表示提交方式，get/post
    -->
    <form action="#" method="get">
        <!-- 账号 -->
        <label for="zhanghao">账号：</label>
        <input type="text" id="zhanghao" name="zh"/> <br>

        <!-- 密码 -->
        <label for="mima">密码：</label>
        <input type="password" id="mima" name="mm"/> <br>

        <!-- 确认密码 -->
        <label for="queren">确认密码：</label>
        <input type="password" id="queren" name="qzmm"/> <br>

        <!-- 昵称 -->
        <label for="nicheng">昵称：</label>
        <input type="text" id="nicheng" name="nc"/> <br>

        <!-- 邮箱 -->
        <label for="youxiang">邮箱：</label>
        <!-- <input type="text" id="youxiang"/> <br> -->
        <input type="email" id="youxiang" name="yx"/> <br>

        <!-- 手机号码 -->
        <label for="shouji">手机：</label>
        <input type="text" id="shouji" name="sj"/> <br>

        <!-- 头像 -->
        <label for="touxiang">头像：</label>
        <input type="file" id="touxiang" name="tx"/> <br>

        <!-- 性别 -->
        <label for="xingbie">性别：</label>
        <!-- name相同的单选按钮，属于同一组 -->
        <input type="radio" value="男" name="xingbie"/>男
        <input type="radio" value="女" name="xingbie"/>女 <br>

        <!-- 爱好 -->
        <label for="aihao">爱好：</label>
        <input type="checkbox" value="原神" name="ah"/>原神
        <input type="checkbox" value="CS-go" name="ah"/>CS-go
        <input type="checkbox" value="永劫无间" name="ah"/>永劫无间
        <input type="checkbox" value="王者" name="ah"/>王者 <br>

        <!-- 个人主页 -->
        <label for="zhuye">个人主页：</label>
        <!-- <input type="text" id="zhuye"/> <br> -->
        <input type="url" id="zhuye" name="zy"/> <br>

        <!-- 生日 -->
        <label for="shengri">生日：</label>
        <input type="date" id="shengri" name="sr"/> <br>

        <!-- 地址 -->
        <label for="dizhi">地址：</label>
        <select id="dizhi" width="300" name="dz">
            <option value="四川">四川</option>
            <option value="广州">广州</option>
            <option value="西藏">西藏</option>
            <option value="新疆">新疆</option>
            <option value="威海">威海</option>
        </select><br>

        <!-- 个人介绍 -->
        <label for="jieshao">介绍：</label>
        <textarea rows="5" cols="80" name="js"></textarea><br>

        <!-- 重置按钮：清空内容 -->
        <input type="reset" value="清空"/>
        <!-- 提交按钮：提交信息给处理者 -->
        <input type="submit" value="添加"/>
    </form>
</body>
</html>