前端系列之HTML（表单）

最新推荐文章于 2024-05-07 23:33:30 发布
最新推荐文章于 2024-05-07 23:33:30 发布
阅读量4k 收藏 16
点赞数 3
分类专栏： 前端 文章标签： html 前端 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtdask/article/details/79094961
版权

一.表单基本结构

表单应用场景

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

常用表单元素使用

这里写图片描述

下拉菜单和列表标签

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

表单交互属性

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单</title>
</head>
<body>
<form action="action.php" target="_blank">
    <h1 align="center">注册信息</h1>
    <hr color="#336699"/>
    <form>
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td align="right">姓名：</td>
                <td align="left"><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名"/></td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td align="left"><input type="text" name="email" size="25" value="@163.com"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td align="left"><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td align="left"><input type="password" name="paw_confirm" size="25" maxlength="6" placeholder="请再输入密码"/></td>
            </tr>
            <tr>
                <td align="right">上传照片：</td>
                <td align="left"><input type="file" name="file"/></td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td align="left">
                    男 <input type="radio" name="sex" value="man"/>
                    女 <input type="radio" name="sex" value="woman"/>
                    保密 <input type="radio" name="sex" value="bm" checked/>
                </td>
            </tr>
            <tr>
                <td align="right">爱好：</td>
                <td align="left">
                    读书 <input type="checkbox" name="dx1" value="read" checked/>
                    跳舞 <input type="checkbox" name="dx1" value="dance"/>
                    唱歌 <input type="checkbox" name="dx1" value="sing"/>
                </td>
            </tr>
            <tr>
                <td align="right">爱好的运动：</td>
                <td align="left">
                    跑步 <input type="checkbox" name="dx2" value="1" checked/>
                    篮球 <input type="checkbox" name="dx2" value="2"/>
                    跳绳 <input type="checkbox" name="dx3" value="3"/>
                </td>
            </tr>
            <tr>
                <td align="right">城市：</td>
                <td align="left">
                    <select name="city">
                        <option value="xz">--请选择--</option>
                        <option value="bj" selected>北京</option>
                        <option value="tj">河北</option>
                        <option value="hb">河南</option>
                        <option value="sh">天津</option>
                        <option value="fj">石家庄</option>
                        <option value="xm">厦门</option>
                    </select>

                    <select name="city" size="6" multiple>
                        <option value="bj">北京</option>
                        <option value="tj">河北</option>
                        <option value="hb">河南</option>
                        <option value="sh">天津</option>
                        <option value="fj">石家庄</option>
                        <option value="xm">厦门</option>
                    </select>

                    <select name="city">
                        <option value="xz">--请选择--</option>
                        <optgroup label="一线">
                            <option value="bj" selected>北京</option>
                            <option value="tj">河北</option>
                            <option value="hb">河南</option>
                        </optgroup>
                        <optgroup label="二线">
                            <option value="sh">天津</option>
                            <option value="fj">石家庄</option>
                            <option value="xm">厦门</option>
                        </optgroup>
                    </select>

                    <select name="city" multiple size="6">
                        <option value="xz">--请选择--</option>
                        <optgroup label="一线">
                            <option value="bj" selected>北京</option>
                            <option value="tj">河北</option>
                            <option value="hb">河南</option>
                        </optgroup>
                        <optgroup label="二线">
                            <option value="sh">天津</option>
                            <option value="fj">石家庄</option>
                            <option value="xm">厦门</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">简介：</td>
                <td align="left"><textarea name="jj" rows="6" cols="50" placeholder="请输入您的简介"></textarea></td>
            </tr>

            <tr>
                <td align="center" colspan="2">
                    <input type="button" value="点我哦" name="button"/>
                    <input type="submit" value="submit" name="submit"/>
                    <input type="reset" value="reset" name="reset"/>
                    <input type="image" name="image_button" src="image/emoji-11.png"/>

                </td>
            </tr>
            <tr>
                <td align="left"><input type="hidden" name="hidden" value="这是一个用户注册信息"/></td>
                <td></td>
            </tr>
        </table>
    </form>
</form>
</body>
</html>
众拾达人
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单元素的综合案例
weixin_45784564的博客
05-21 3056
目录任务描述相关知识编程要求测试说明源码 任务描述 本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有<div>标签，会自动换行，就不用<br>标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： 用户名：添加类.common； 昵称：添加类.common； 性别：name属性的值为sex，禁用保密； 男：<label>标签的for属性的值为male；
web-前端之员工界面修改的form表单，其中包含各种表单的简单表达
h_Snow_1的博客
09-26 2751
这个是简单介绍一下员工个人信息的表单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style>
Html的表单
热门推荐
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
前端入门篇（八）表单
最新发布
2401_84092832的博客
05-07 361
单选框：input – radio以name划分组别在同一组里的选项只能选其中一个多选框：input – checkbox下拉框：select – option自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
form表单结构的简单介绍
前端小白
06-13 5212
最近在复习css的基础知识，美其名曰：“温故而知新”。哈哈，开个玩笑，不过确实重新认识到之前在学习时不去注意的一些细节，例如一些语义化标签的运用。现在像把表单的结构标签简单的做下总结。当是增强记忆，也检验检验自己“温故”的成果。如有纰漏，还请各路大神指出！ 先插入一段代码先： 个人基本信息 名称： 密码： 详细信息： 1.form标签中的重要属性： 其中，ac
【前端学习笔记—表单】
LPC的博客
03-29 794
目录前言一、什么是表单二、表单用法三、表单元素1. 表单元素格式2.表单元素类型（1）text文本框（2）password密码框（3）radio单选框（4）checkbox复选框（5）button按钮（6）file文件（7）hidden隐藏（8）select下拉选择框（9）textarea多行文本域 前言 本文就前端知识中部分表单基础知识点进行总结，希望对你有用！ 一、什么是表单 在html中表单是一个包含表单元素的区域。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。.
前端开发与实践- 表单.pptx
10-29
基础的HTML表单结构如下： ```html <textarea name="" rows="" cols=""></textarea> <option value="" selected></option> ``` - `method` 属性定义了处理表单数据的方法，通常有 "get" 和 "post" 两种...
BootStrap智能表单实战系列(三)分块表单配置详解
11-24
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 ...
BootStrap智能表单实战系列(十一)级联下拉的支持
11-25
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 ...
BootStrap 智能表单实战系列(五) 表单依赖插件处理
09-02
总结来说，BootStrap智能表单实战系列第五部分主要探讨了在生成表单元素后的后续处理，特别是如何利用插件如datepicker和autocomplete提升表单功能。通过理解并熟练运用Bootstrap的这些工具和方法，开发者能够创建出...
BootStrap智能表单实战系列(四)表单布局介绍
11-22
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 表单的布局分为自动布局和自定义布局两种： 自动布局就是根据配置项中第二级配置项中数组的长度来自动...
前端——Form表单
Jonsnow1457的博客
03-25 1万+
表单相关的元素和属性 HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器。 一、Form元素 Form元素用于生成输入表单，是一个非可视化结构，所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。 1.Form元素属性 通用属性：id、style、class。 事件属性：onclick a...
前端HTML<form>表单的属性和使用
冯小东
10-06 2万+
1.表单的作用 表单用于显示、收集信息，并将信息提交给服务器 2.表单的元素 1、语法                                    允许出现表单控件                          2、属性                1、action                     定义表单被提交时发生的动作
HTML表单基本结构
思过留痕
01-29 2980
登录注册信息等形式是用表单制作的，如何在网页中制作表单？ input标签 简单表单
web前端学习笔记（四）——表单
齐在的专栏
08-29 5754
HTML表单结构 定义：表单是手机用户数据信息的各种表单元素的集合区域。 作用：实现网页上的数据交互，手机客户端输入的数据信息，提交到网站服务器端进行处理。 最常见的应用：1. 注册/登录 2. 搜索 3. 留言/评论 4. 文件上传/文章编辑 结构：表单区域+表单控件（表单元素） 表单标签：&lt;forem&gt;   双标签，块状元素。用来定义网页中的交互输入的区域（表单区）。所有...
HTML表单
weixin_47511190的博客
07-11 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!-- form标签就是表单 input type=text 是文本输入框 value设置文本框的默认值 input type=radio 是单选框 name属性可以对其分组，
（前端）动态生成form表单
卑微的码农
11-05 3099
后端：form保存表单控件，entity保存表单数据 @RequiresPermissions("archcodeapplydetail:archcodeApplyDetail:view") @RequestMapping(value = "getFormByArchtypeid") @ResponseBody public Map getFormByArchtypeid(String ...
使用HTML创建表单
weixin_65905274的博客
03-18 2224
<form></form>标记被用于定义表单域，即创建一个表单。action、method、name为表单标记<form>的常用属性。 action属性用于指定接收并处理表单数据的服务程序的。 method属性用于设置表单数据的提交方式，其取值为get或post。 name属性用于指定表单的名称，以区分一个页面中的多个表单。 autocomplete属性用于指定是否自动完成功能。“自动完成”是指表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个
【HTML 教程系列第 20 篇】什么是 HTML 中的表单
“Allen Su”的博客
10-31 1837
一：什么是表单。 二：表单的组成。 三：表单标签有哪些。
html注册前端表单提交
01-10
当用户想要在网页上进行注册时，通常需要填写一系列的信息，比如用户名、密码、邮箱等等。而这些信息是通过前端表单来收集的。 在HTML中，创建一个注册的前端表单非常简单。首先，我们需要使用```<form>```标签来创建一个表单，然后在表单中使用```<input>```标签来添加不同的输入框，比如文本框、密码框、邮箱框等等。每个输入框都有一个```name```属性，用来标识这个输入框的名称。 当用户填写完表单后，他们可以点击表单中的提交按钮，这将触发表单的提交事件。在HTML中，这通常是通过```<input type="submit">```来实现的。 一旦用户点击了提交按钮，表单中的数据将被发送到服务器端进行处理。通常这时候会使用后端的代码来保存这些数据，比如将用户信息存储到数据库中。 总的来说，HTML提供了一种简单且灵活的方式来收集用户的信息并进行注册。通过创建一个前端表单，并在表单中添加相应的输入框和提交按钮，用户可以方便地填写并提交注册信息，使整个注册过程变得非常顺畅。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值