29.HTML--Form 表单

最新推荐文章于 2021-12-15 22:05:41 发布
最新推荐文章于 2021-12-15 22:05:41 发布
阅读量136 收藏
点赞数
原文链接：https://my.oschina.net/springMVCAndspring/blog/1504722
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1.效果

181832_7Hff_3015807.png

2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Form表单</title>
    </head>
    <body>
        <h2 align="center">注册</h2>
        <!--<form></form>有两个属性 一个是action是表示要将数据提交到的地方（如服务器） 另一个是请求方式（主要GET默认的可以在搜索栏看到提交的信息 另一个是POST它提交的信息我们在搜索栏看不到提交的信息 安全切上传文件大小不限制）-->
        <!--表单必须用form标签来写-->
        <form action="#" method="get">
            <!--1.
                作者：offline
                时间：2017-08-08
                描述：input 框
           -->
           <table align="center" bgcolor="greenyellow">
               <tr>
                   <td align="right" >用户名 :</td>
                   <td><input type="text" name="username" placeholder="请输入姓名" size="50px" maxlength="10" autofocus="autofocus" />    </td>
               </tr>
                <tr>
                    <td align="right">密 码：</td>
                    <td><input type="password" name="password" placeholder="请输入密码" size="50px"  /></td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td><input type="password" size="50px" placeholder="请确认密码" />
                
            </tr>
                 <br />
                 <!--2.
                     作者：offline
                     时间：2017-08-08
                     描述：单选按钮
                 -->
                 <tr>
                     <td align="right">性   别：</td>
                     <td> <input type="radio"  name="sex" value="0"/>男
                     <input type="radio"  name="sex" value="1"/>女</td>
                 </tr>
                        <!--3.
                            作者：offline
                            时间：2017-08-08
                            描述：浮选按钮
                        -->
                        <tr>
                            <td align="right">爱好： </td>
                            <td><input type="checkbox" name="hobby" value="1"  checked="checked"/>看书
                                <input type="checkbox" name="hobby" value="2" />跑步
                                <input type="checkbox" name="hobby" value="3" />旅行
                                <input type="checkbox" name="hobby" value="4" />玩游戏
                            </td>
                            
                        </tr>
                        <!--4.
                            作者：offline
                            时间：2017-08-08
                            描述：下拉框选择select
                        -->
                        <tr>
                            <td align="right">籍贯：</td>
                            <td>
                                <select name="city">
                                <option value="010" selected="selected">北京</option>
                                <option value="029">西安</option>
                                <option value="024">沈阳</option>
                                <option value="021">上海</option>
                                </select>
                            </td>
                        </tr>
                        <!--5.
                            作者：offline
                            时间：2017-08-08
                            描述：图像
                        -->
                        <tr>
                            <td align="right">照片：</td>
                            <td>
                                <input type="file" name="photo">
                            </td>
                        </tr>
                        <!--6.
                            作者：offline
                            时间：2017-08-08
                            描述： 邮箱
                        -->
                        <tr>
                            <td align="right">邮箱：</td>
                            <td><input type="email" placeholder="请输入邮箱" required="required" name="email" style="width: 380px;"/ ></td>
                        </tr>
                        <!--7.
                            作者：offline
                            时间：2017-08-08
                            描述：textarea
                        -->
                        <tr>
                            <td align="right">自我介绍：</td>
                            <td>
                                <textarea placeholder="自我介绍" style="width: 380px;" name="self"></textarea>
                            </td>
                        </tr>
                        <!--8.
                            作者：offline
                            时间：2017-08-08
                            描述：注册按钮，就是提交 将数据上传
                        -->
                        <tr>
                            <td align="right">注册:</td>
                            <td> <input type="submit" id="save"/></td>
                        </tr>
                        <!--9.
                            作者：offline
                            时间：2017-08-08
                            描述：重置 按钮
                        -->
                        <tr>
                            <td align="right">重置</td>
                            <td><input type="reset"/></td>
                        </tr>
                        </table>
        </form>
    </body>
</html>
 

转载于:https://my.oschina.net/springMVCAndspring/blog/1504722

weixin_33804582
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js-TypeForm的一个开源替代构建在nodejs之上可以从PDF或从头创建令人惊叹的表单
08-10
标题中的“Node.js-TypeForm的一个开源替代”指的是一个基于Node.js平台的开源项目，它旨在提供与TypeForm类似的表单创建功能。TypeForm是一款在线表单构建工具，以其用户友好的界面和强大的功能而闻名。这个开源...
form表单提交 method为get对于action的影响
91奔跑的蜗牛
12-18 2476
   &lt;form action="BaseServlet?method=addStu" method="get"&gt;         &lt;input type="text" name="username"&gt;         &lt;input type="submit" value="提交"&gt;     &lt
Form表单提交方法method
ccaakkee的专栏
04-01 9994
method="get"，表单在提交时，填写在表单中的数据会和action="url"中的url编码在一起。 method="post"，表单在提交时，填写在表单中的数据将在底层发送到action="url"中的url去。 两者的区别在于，method="get"时，数据传输是可见的；method="post"时，数据传输是不可见的。 notes的代理一般用的post方法，在domin
Thymeleaf使用
FurtherSkyQ的博客
06-10 1496
本文只适用于不会Java对HTML语言有基础的程序员们，是浏览了各大博客后收集整理，重新编辑的一篇文章，希望能对大家有所帮助。最后本文如果有哪里写错的，希望各位大神们能够批评指正，谢谢大家！ 　　对于Thymeleaf，网上特别官方的解释无非就是：网站或者独立应用程序的新式的服务端java模板引擎，可以执行HTML，XML，JavaScript，CSS甚至纯文本模板。这个解释没有任何问题，它确实是建立在Java的基础之上的，但是像我这种只会前端不懂Java的人，其实也可以运用它。了解angular的人在看
Springboot实现简单的文件上传和下载功能
weixin_46414452的博客
12-15 1772
一、第一步， 第一步依然是创建数据库，我简单设计了三个字段(file_id，file_name，create_time) CREATE TABLE `txtfile` ( `file_id` int NOT NULL AUTO_INCREMENT, `file_name` varchar(45) NOT NULL, `create_time` varchar(45) NOT NULL, PRIMARY KEY (`file_id`) ) ENGINE=InnoDB AU...
<form action="form_action.asp" method="get">
shiwaxinbin的专栏
04-16 3822
form是表单标签，可以把里面的文本框，下拉框什么的控件里面的值传递给别的页面， action="form_action.asp" 就是说要把值传递给form_action.asp这个页面。 method="get"这个是说传递方式，方式一共有两种get和post，get把值直接通过地址栏上的字符传过去，不安全，能传递的总长度是255，比较短，post比较安全，传的值更大。
github.io-registration-form
03-15
总之，这个项目涉及了JavaScript在Web表单处理中的核心应用，包括表单验证、动态效果、数据处理等，同时也可能涵盖了HTML和CSS的基础知识。开发者通过这个项目可以提升在网页交互和用户体验方面的技能。
sendForm.js-Serialize.js
02-21
序列化是将HTML表单中的数据转换为URL编码字符串的过程，这在进行Ajax请求或者发送POST数据时非常常见。下面将详细讨论JavaScript中的表单序列化、相关API以及sendForm.js-Serialize.js库可能实现的功能。 1. 表单...
vue自定义表单生成器form-create使用详解
10-16
Vue 自定义表单生成器 `form-create` 是一个强大的工具，它允许开发者根据 JSON 参数动态地生成表单，极大地简化了复杂表单的构建过程。`form-create` 支持 Vue 的各种组件，并且提供了丰富的功能，如动态渲染、数据...
1.form-validation
05-06
表单验证器（入门项目） 简单的客户端表单验证。 检查必填项，长度，电子邮件和密码是否匹配 项目规格书 创建表单用户界面 显示特定输入下的错误消息 checkRequired（）接受输入数组 checkLength（）检查最小和最大...
守望先锋资讯小程序(源码).zip
07-28
守望先锋资讯小程序(源码).zip
无人智能化关键技术及其在火炮系统中的应用_常建龙.caj
07-28
无人智能化关键技术及其在火炮系统中的应用_常建龙
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
07-28
本科设计-机器学习识别图片验证码-可执行内含文档代码-可执行内含文档代码.zip
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
07-28
【2023】智能网联汽车数据安全合规白皮书-路特斯科技&普华永道_43页.pdf
一种无人机起落一体的四足机器人.pdf
07-28
一种无人机起落一体的四足机器人
一种十二自由度仿生四足机器人.pdf
07-28
一种十二自由度仿生四足机器人
基于多种机器学习算法(如人工神经网络、逻辑回归、随机森林等)进行股票价格预测python实现源码+数据.zip
07-28
基于多种机器学习算法(如人工神经网络、逻辑回归、随机森林等)进行股票价格预测python实现源码+数据.zip 个人大四的毕业设计、经导师指导并认可通过的高分设计项目，评审分96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。
vue2基础语法笔记和代码
最新发布
07-28
vue2基础语法笔记和代码
基于Springboot和Vue的敬老院管理系统源码 敬老院管理系统代码（优秀毕业设计）
07-28
敬老院管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
.login-form .group label .icon:before{ left:3px; width:5px; bottom:6px; -webkit-transform:scale(0) rotate(0); -ms-transform:scale(0) rotate(0); transform:scale(0) rotate(0); } .login-form .group label .icon:after{ top:6px; right:0; -webkit-transform:scale(0) rotate(0); -ms-transform:scale(0) rotate(0); transform:scale(0) rotate(0); } .login-form .group .check:checked + label{ color:#fff; } .login-form .group .check:checked + label .icon{ background:#1161ee; } .login-form .group .check:checked + label .icon:before{ -webkit-transform:scale(1) rotate(45deg); -ms-transform:scale(1) rotate(45deg); transform:scale(1) rotate(45deg); } .login-form .group .check:checked + label .icon:after{ -webkit-transform:scale(1) rotate(-45deg); -ms-transform:scale(1) rotate(-45deg); transform:scale(1) rotate(-45deg); } .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{ -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); } .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{ -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); }
06-09
它定义了一个登录表单的样式。具体来说，它包含了以下元素的样式定义： - 输入框组（class 为 group）的样式 - 标签（class 为 label）的样式 - 选中状态下的样式（class 为 check） - 复选框前面的图标（class 为 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值