html表单标签的应用（上）

已于 2022-06-20 17:26:16 修改
阅读量70 收藏
点赞数
分类专栏： html 文章标签： html servlet java
于 2022-06-20 17:23:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71814235/article/details/125376931
版权

<!DOCTYPE html>

<!-- html根节点(双标签) -->

<html lang="en">

<head>

    <!-- head页面头部区域标签 -->

    <meta charset="UTF-8">

    <!-- charset="  UTF-8"告诉浏览器当前页面使用的字符编码集utf-8，万国码；gb2312中文简体-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- title标题标签(双标签) -->

    <title>Document</title>

</head>

<!-- body页面主体标签(双标签) -->

<body>

    <!-- form表单标签，双标签 ,搜集用户输入的数据-->

    <!-- method="get"和method="post"表单中数据提交方式 -->

    <!-- GET是从服务器获取数据，服务器需要的数据会出现在url里；

     POST是将数据传给服务器-->

    <form action="" mathod="get">

        <!-- input:h 快捷写法-->

        <!-- type="hidden" 隐藏域,标签的内容，在页面中不会显示出来

        数据value可以被发送给后台程序 -->

        <input type="hidden" name="" value="xr001">

        <!-- div是一个盒子(双标签) -->

        <div>

            <!-- label标签为 input 元素定义标注（标记）

           label 元素不会向用户呈现任何特殊效果-->

            <label for="">用户名</label>

            <!-- input:t 快捷写法，可以快速生成单行文本框 -->

            <!--type="text"单行文本框-->

            <!-- disabled="disabled"禁用(文本框会变成灰色，用户不能编辑这个文本框，只能看) -->

            <!--  disabled="disabled"简写disabled -->

            <input type="text" name="usename" id="usename" value="小李123" disabled="disabled" >

        </div>

        <div>

            <label for="">昵&emsp;称</label>

            <!-- maxlength="3"属性设置文本框中最多可以输入的字符数量(包括空格) -->

            <!-- size 属性用来定义文本框可见的字符数,

                当用户输入的字符数超出这个值时，超过的值，还是可见的 -->

                <!-- 注意：在项目中，需要限制别人输入字符，用maxlength属性,不推荐用size属性。 -->

                <input type="text" name="nickname" id="nickname" maxlength="3">

        </div>

        <div>

            <label for="">密&emsp;码</label>

            <!-- input：p 快捷写法，可以快速生成密码框 -->

            <!-- type="password"密码框 ,密码框输入的字符不可见，会被 “点”代替-->

            <input type="password" name="" id="">

        </div>

        <!-- textarea多行文本框 -->

        <div>

            <label for="">请留言：</label>

            <!-- cols="30"可见内容的宽度 里面的值可调整-->

            <!-- rows="10"可见内容的高度 里面的值可调整-->

            <textarea name="" id="" cols="30" rows="10"></textarea>

        </div>

        <!-- 单选按钮 -->

        <div>

            <label for="">性别：</label>

            <!-- input:r 快捷写法，可以快速生成 单选按钮 -->

            <!-- checked="checked" 默认选中 简写 checked -->

          <input type="radio" name="sex" id="" value="男" checked="checked">男

          <input type="radio" name="sex" id="" value="女" checked>女

        </div>

        <!-- 复选框 type="checkbox"-->

        <div>

            <label for="">爱好：</label>

            <!-- input:c 快捷写法，可以快速生成复选框 -->

            <input type="checkbox" name="hobby[]" id="" value="阅读">阅读

            <!-- input：c*3快捷写法 -->

            <input type="checkbox" name="hobby[]" id="" value="听歌">听歌

            <input type="checkbox" name="hobby[]" id="" value="爬山">爬山

            <input type="checkbox" name="hobby[]" id="" value="旅游">旅游

        </div>

        <div>

            <label for="">籍贯：</label>

            <!-- select 下拉菜单 -->

            <select name="" id="">

            <!-- option菜单项 -->

            <!-- option*5 快捷写法 -->

            <option value="">请选择</option>

            <option value="">北京</option>

            <option value="">上海</option>

            <option value="">安徽</option>

            <option value="">江苏</option>

        </select>

        </div>

        <div>

            <label for="">政治面貌:</label>

            <!-- select>option*4 快捷写法-->

            <!-- multiple multiple属性可以设置成多项选择。注意：此时只需按住`ctrl`+鼠标左键就可以选择多个选项

                size="5" 如果需要让页面显示多个选项，就要使用 size 属性-->

            <select name="" id="" multiple size="5">

                <option value="请选择">请选择</option>

                <option value="">党员</option>

                <option value="">团员</option>

                <option value="">共青团员</option>

            </select>

        </div>

        <div action="" method="post">

            年龄区间：

            <select name="selected" multiple>

                <option selected="selected">18岁以下</option>

                <option>18-28岁</option>

                <option selected="selected">28-38岁</option>

                <option>38岁以上</option>

             </select>

            </div>

            <form action="" method="post">

                年龄区间：

                <select name="selected" multiple>

                    <option selected="selected" value="underage">18岁以下</option>

                    <option value="teens">18-28岁</option>

                    <option selected="selected" value="youth">28-38岁</option>

                    <option value="more">38岁以上</option>

                </select>

            </form>

            <div>

                <label for="">上传文件</label>

                <!-- input:f 快捷写法-->

              <!-- type="file"  文件上传标签 -->

                <input type="file" name="" id="">

            </div>

            <div>

                <!-- input*5 快捷写法-->

                <!--type="submit" 提交按钮 -->

                <!-- input:s 快捷写法 -->

                <input type="submit" value="提交">

                <!-- input：r 快捷写法-->

                <!-- type="reset" 重置按钮 -->

                <input type="reset" value="重置">

                <!-- type="image"图像按钮 -->

                <!-- input:i 快捷写法 -->

                <input type="image" src="./images/QQ图片20220616111100.jpg" alt="50">

               <!-- botton按钮 -->

                <button>立即登录</button>

            </div><input type="checkbox" name="" id="">

    </form>

    <!-- script   js脚本标签(双标签：它里面是写js脚本) -->

    <script>

//抓取元素(获取元素)

var usename=document.getElementById('usename')

console.log(usename);

//获取value属性上的值

console.log(usename.value);

 </script>

   </body>

</html>

正在修炼web的小芮
关注
专栏目录
HTML常用标签之表单标签
m0_54866636的博客
02-26 6938
HTML常用标签之表单标签 前言 一、表单域 二、表单元素 1.input 输入表单元素 2.select 下拉表单元素 3.textarea 表单元素 前言 在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成 一、表单域 表单域是一个包含表单元素的区域 在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单
HTML5表单验证在Tab标签页中的应用.pdf
01-01
HTML5表单验证在Tab标签页中的应用 HTML5表单验证是现代Web开发中一个重要的功能，它允许开发者在不依赖额外JavaScript库的情况下，直接通过HTML标记来设定验证规则，确保用户输入的数据符合预设的条件。这种方法...
HTML表单标签的简单应用
weixin_44833461的博客
04-08 148
用户注册表 用户注册表 </tr> <tr> <td>课程</td> <td> <select> <option>java</option> <option>c</option> ...
html表单标记简单使用
孤云博客
08-25 3649
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) 1、<form>...</form> 表单标记 基本语法格式： <form action="url" method="get|post" name="name" onSub...
『HTML系列』表单标签
老__L的博客
10-26 4270
本文主要介绍button、datalist、fieldset、form、input、label、legend、meter、optgroup、option、output、progress、select、textarea标签。 form 元素的开始标签和结束标签不能省略；input 是一个空元素；input 必须有开始标签但不必有结束标签；不要在 label 元素内部放置可交互的元素，
HTML的form表单标签详解~
昊虹AI笔记
08-25 1514
HTML的form表单标签详解~
HTML 使用表单标签实现注册页面的实例代码
09-22
HTML中的表单标签是用于创建交互式网页，允许用户输入数据，并通过网络将这些数据发送到服务器进行处理的重要标签。在创建注册页面时，表单标签是必不可少的一部分。下面详细介绍HTML使用表单标签实现注册页面的关键...
Play2-HTML5Tags：Play框架HTML5表单标签模块
02-04
Play2-HTML5Tags是针对Play框架的一个扩展，专注于提供HTML5表单标签的支持，使得开发人员在构建前端表单时能够更加便捷地利用HTML5的新特性。 首先，我们来深入了解HTML5标签。HTML5作为HTML的最新版本，引入了一...
前端用html写excel文件直接打开
最新发布
全易
09-10 422
html文件直接用excel打开
How can I load the openai api configuration through js in html?
suiusoar
09-07 779
怎样在HTML中通过JavaScript加载OpenAI API配置
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1162
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML转义字符对照表
云博客_资源宝分享
09-10 806
HTML转义字符对照表
深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换
软考鸭
09-09 863
的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用Puppeteer（一个无头Chrome浏览器）来实现HTML的渲染和截图功能。Cluster：来自库，用于管理无头浏览器的并发执行。Screenshot：自定义的截图模型。：执行截图操作的函数。Options和：类型定义，用于确保传入参数的合法性。本文通过对的main.ts源码的深入解析，揭示了该库如何将HTML内容转换为图片的内部工作原理。
使用HTML
nice66660的博客
09-09 732
a>
(代码可运行)Bootstrap框架的HTML示例
Keep trying, keep going
09-10 635
Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。等类），可以快速构建一个美观且响应式的Web应用。请将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。这个示例展示了一个简单的响应式布局，包括一个居中的标题和三个卡片组件。通过使用Bootstrap的栅格系统（以下是一个使用Bootstrap构建的。
HTML 图片
qq_40107571的博客
09-07 540
HTML 图片
【H2O2|全栈】更多关于HTML（1）HTML进阶（一）
过期的H2O2的博客
09-10 1205
本系列博客是对入门专栏的HTML知识的补充，并伴随一些补充案例。这一期主要介绍位置在HTML文档头部里的内容。不是专业的科普博主，文笔不好，多多包涵（嘿嘿）。
【HTML】可展开的顶层菜单栏
weixin_51649465的博客
09-07 395
【代码】【Html】可展开的顶层菜单栏。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4619
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
Struts应用实例：HTML标签库与表单验证
login.jsp用于用户登录，包含一个HTML表单，有两个字段——username和password。当用户提交表单时，系统会验证输入是否匹配预设的用户名（例如"john"）和密码（例如"123"）。 如果验证成功，系统会在session中设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值