html实例004--表单：输入表单元素以及label标签

最新推荐文章于 2024-02-02 09:27:14 发布

dododododoooo

最新推荐文章于 2024-02-02 09:27:14 发布

阅读量546

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/dododododoooo/article/details/118116209

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

html实例004–表单：输入表单元素以及label标签

<!DOCTYPE html>
<html lang="zh-CN">
<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>表单</title>
</head>
<body>
    <!-- 测试表单 -->
    <!-- 表单包括三个部分:表单域、表单控件、提示信息 -->
    <!-- 表单域：包含表单元素的区域，会把它范围内的元素信息提交到服务器 -->
    <!-- <form action="url地址" method="提交方式" name="表单域名称">  各种表单控件 </form> -->
<form align="left" action="#" method="POST" name="form1" width="500" >
    <!-- 输入框表单元素 -->
    <!-- input 输入表单元素 -->
    <!-- select 下拉表单元素 -->
    <!-- textarea 文本域元素 -->
    <div>
    <h2>
        输入表单元素
    </h2>
    <!-- type取值 ： -->
    <!-- button 定义可点击按钮 -->
    <!-- checkbox 定义复选框 -->
    <!-- file 定义输入字段和浏览按钮 义工文件上传 -->
    <!-- hidden 定义隐藏的输入字段 -->
    <!-- image 定义图形形式的提交按钮 -->
    <!-- password 定义密码字段 该字段中的字符被掩码 -->
    <!-- radio 定义单选按钮 -->
    <!-- reset 定义重置按钮 重置按钮会清除表单中所有数据 -->
    <!-- submit 定义提交按钮 会把表单数据发送给服务器 -->
    <!-- text 定义单行的输入字段 用户可在其中输入文本 默认宽度为20个字符 -->
    <!-- input 属性:type、name、value、checked maxlength -->
    <!-- type 输入表单元素类型 -->
    <!-- name 输入表单元素名称 相当于变量名 -->
    <!-- value 元素值 发送后台数据，后台使用 -->
    <!-- checked 首次加载时应当被选中  -->
    <!-- maxlength 字段中输入字符的最大长度 -->
    <!-- 注意 name 和 value 应该是每个表单元素都应有的 后台调用使用 -->
    <!-- 单行文本框 -->
    账号：<input type="text" name="username" value="1908815130" maxlength="10" id="account"></span><br>
    <!-- 密码框 用户看不见输入的密码 -->
    密码：<input type="password" name="password"><br>
    <!-- 单选按钮 相同的name值是一组按钮 如果name值不同无法实现单选按钮 -->
    性别：<input type="radio" name="sex" value="男" checked="" id="男">男&nbsp;&nbsp;<input type="radio" name="sex" value="女" checked="" id="女">女<br>
    <!-- 复选框 可以多选 -->
    爱吃的水果：<input type="checkbox" name="favFruit" value="苹果">苹果&nbsp;&nbsp;<input type="checkbox" name="favFruit" value="榴莲">榴莲&nbsp;&nbsp;<input type="checkbox" name="favFruit" value="西瓜" checked="checked">西瓜<br>
    <!-- 文件  -->
    上传：<input type="file" name="file" value="上传文件">浏览<br>
    <!-- 按钮 -->
    验证码：<input type="text" name="yanzheng" value="验证码" maxlength="6"><input type="button" name="sendYanzheng" value="发送验证码"><br>
    <!-- 提交按钮 -->
    <input type="submit" name="submit" value="提交"><br>
    <!-- 重置按钮 -->
    <input type="reset" name="resetdata" value="重置按钮"><br>
    <!-- image -->
    <input type="image" name="image" value="图形"><br>
    <!-- hidden -->
    <input type="hidden" name="hidden" value="隐藏"><br>
</div>
<div>
    <h2>
        <!-- label 标签 可以绑定一个元素 -->
        <label for="account">账号</label>
        <label for="男">男</label>
        <label for="女">女</label>
    </h2>


</div>

</form>

</body>
</html>```

dododododoooo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html实例004--表单：输入表单元素以及label标签

html实例004–表单：输入表单元素以及label标签<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫

专栏目录