html--form表单常用操作

form表单

用于收集用户信息,如:登录、注册等场景;所有要提交的数据都必须放在form标签中<form action=" " method=" ">
action:提交地址、动作,与input标签中type标签的submit属性相关联。 <input type="submit" value="提交" />,提交地址是action的地址
method:提交方法,有get和post两种提交方法。
get方法:提交数据可以再URL中看见,
例如:
(1)以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail传递参数
(2)URL长度有限制,所以传递的参数数据就有限制
(3)由于数据可以看见,所以不安全
(4)网页默认的请求是get

post方法:

  1. 将form data 保存在http的请求体
  2. 没有长度限制
  3. 安全的
  4. 往往在开发中用于提交数据form表单提交post
  5. 文件上传 method = post enctype=multipart/form-data

input标签:输入框,是表单中最重要的部分
name:指定名字,因为提交的是键值对,所以必须要指定名字,否则无法提交,即使提交了也没有意义
value:文本框的内容,一般用在不能输入的类型中,如改变按钮的名字等。
placeholder:占位内容,通常用于提示:

<input type="text" name="emailId" placeholder="输入账号" />

在这里插入图片描述
readonly:只读模式,设置后无法修改输入框的内容

disabled:禁用状态 
  在这里插入图片描述
size:由于输入框是单行的,所以只能设置宽度
maxlength:限制输入框最大输入的字符个数

type属性:
text:普通文本,标签的默认属性时text ,通常如输入用户名用的是text
passworld:密文文本,输入的内容不显示。如密码输入框
submit:提交按钮。上文提到过,要与action一起用。
radio:单选框,多个关联选项name属性要一致,需要设置value,默认选中用checked设置
<labke for=""></lable>:用于关联单选按钮与文字。

性别:<input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label>
<input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label><br/>

CheckBox:复选框,属性与单选框类似

爱好:<input type="checkbox" name="like" value="sport" id="1"/><label for="1">运动</label><input type="checkbox" name="like" value="music"id="2"/><label for="2">音乐</label><input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label><input type="checkbox" name="like" value="games" id="5"/><label for="5">游戏</label><br/>

file:文件上传,需要进行配套设置。提交方法需要用post
hidden:隐藏字段,该字段根普通字段一样,但是不会在页面上显示

<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">

除了输入框外常用的还有下拉选择框和文本域
select:下拉选择框 
属性name需要设置   
size:可以设置高度(选项个数)
每个选项都是一个option,必须指定value,默认选中使用属性selected

籍贯:<select name="from"><option value="bj">北京</option><option value="sh">上海</option><option value="gz">广州</option><option value="sz">深圳</option></select><br/>

textarea:文本域。
说明:可以输入多行文本
属性:
cols:列数(宽度)
rows:行数(高度)
注意:不要在标签书写任何多余的内容

简介:<textarea name="intro" cols="20" rows="5"></textarea><br/><input type="submit" value="注册"><br/>

例子:

为了对齐方便使用table表格标签来辅助对齐。

<html><head><meta charset="utf-8"><title></title></head><body background="timg.jpg"><h1>还没有账号?赶紧注册一个吧!</h1><form><table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0">
<tr><td align="right" padding="0">电子邮箱:</td><td align="left" padding><input type="text" name="emil" placeholder="请输入:"/><br/></td>
</tr>
<tr><td></td><td>您可以使用<a href="#">邮箱</a>或者<a href="#">手机号</a>注册  <br/></td>
</tr>
<tr><td align="right">创建密码:</td><td><input type="password" name="pwd"></td>
</tr>
<tr><td align="right">真实姓名:</td><td><input type="text" name="name" placeholder="请输入:"/></td>
</tr>
<tr><td align="right">性别:</td><td><input type="radio" name="sex" value="0" id="nan"/><label for="nan"></label><input type="radio" name="sex" value="1" id="nv"/><label for="nv"></label></td>
</tr>
<tr><td align="right">生日:</td><td><input type="date" name="date"/><br/></td>
</tr>
<tr><td align="right">我现在:</td><td><input type="radio" name="work" value="school"/>正在上学<input type="radio" name="work" value="worker"/>已经工作<input type="radio" name="work" value="other"/>其他</td>
</tr>
<tr><td align="right"> 现居地:</td><td><input type="text" name="address" placeholder="请输入:"/></td>
</tr>
<tr><td></td><td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服务条款</a></td>
</tr>
<tr><td></td><td><input type="submit" value="立即注册"/></td>
</tr></table></form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL触发器(转载)

触发器&#xff08;trigger&#xff09;是数据库中的一个很重要的、很实用的基于事件的处理器&#xff0c;在处理一些业务需求的时候&#xff0c;使用触发器会很方便。似乎在《高性能MySQL》中&#xff0c;对触发器作了一定的描述&#xff0c;也提到使用中的一些优势和局限性&a…

神级bug解决方法

真的是神级bug,util包中的Arrays类导入不了&#xff0c;一直报错。原因&#xff1a;JDK 1.8和Myeclipse 8.5不兼容&#xff0c;导致java.util.Arrays类无法被编译。所以报错。解决方法&#xff1a;1.降低jdk版本。2.升高Myeclipse版本转载于:https://www.cnblogs.com/yanlongw/…

es6注意点

补救方法&#xff1a; 详情&#xff1a;http://es6.ruanyifeng.com/#docs/array 取出文本内容 实现深拷贝 jq实现不完全深拷贝 jQuery.extend jQuery.fn.extend function () {var options, name, src, copy, copyIsArray, clone,target arguments[0] || {},i 1,length ar…

input标签用法解读

HTML5/HTML中标签用法解读 OK&#xff01;今天博主为小伙伴们介绍的内容是HTML5/HTML中标签的用法&#xff0c;&#xff0c;&#xff0c; &#xff0c;emmm图文并茂哦&#xff01; 下面正式开始内容的介绍&#xff1a;首先&#xff0c;直观上说标签规定了用户可以在其中输入数据…

SpringBoot项目遇到的一些问题

SpringBoot项目整合JPA报错转载于:https://www.cnblogs.com/xb1223/p/10195054.html

关于SpringBoot中的多数据源集成

引言 其实对于分库分表这块的场景&#xff0c;目前市场上有很多成熟的开源中间件&#xff0c;eg&#xff1a;MyCAT&#xff0c;Cobar&#xff0c;sharding-JDBC等。 本文主要是介绍基于springboot的多数据源切换&#xff0c;轻量级的一种集成方案&#xff0c;对于小型的应用可…

实现vue2.0响应式的基本思路

注意&#xff0c;这里只是实现思路的还原&#xff0c;对于里面各种细节的实现&#xff0c;比如说数组里面数据的操作的监听&#xff0c;以及对象嵌套这些细节本实例都不会涉及到&#xff0c;如果想了解更加细节的实现&#xff0c;可以通过阅读源码 observer文件夹以及instance文…

HTML标签类型及特点

一、 概述 HTML&#xff08;Hyper Text Markup Language &#xff09;作为一种标记语言&#xff0c;网页所有的内容均书写在标签内部&#xff0c;标签是组成Html页面的基本元素&#xff0c;因此对标签特性的理解在HTML的学习过程中比较重要。 二、基本分类 HTML中的标签从闭…

打开页面

*<a href"javascript:void(0)" title"google" οnclick"window.parent.addTab(, 测试, Admin/UserRole, 100000)">测试444</a>*转载于:https://www.cnblogs.com/niyl/p/10196528.html

python 大量使用json 存储数据时,格式化输出的方式

import json, pprintdic {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键: 檐下听雨}print(dic)pprint.pprint(dic)print(json.dumps(dic))print(json.dumps(dic, indent2))# {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键…

vue computed 源码分析

我们来看看computed的实现。最简单的一个demo如下&#xff1a; <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> </head> <body> <div id"app"><div name"test&…

软件开发文档整理(之)一张示意图 | 清晰明了

在整个软件开发周期&#xff0c;开发文档是必不可少的资料&#xff0c;它们贯穿于整个开发周期&#xff0c;用来评估计划、规划进度、项目管理、软件测试、软件发布&#xff0c;可以说至关重要。   开发文档必须归档&#xff0c;没有归档的文档作用大打折扣&#xff0c;时效性…

java大数BinInteger

当我们遇到long不行的时候就要考虑这个BinInteger了&#xff0c;因为这是只要你内存够大&#xff0c;就能输入很大的数&#xff0c;用这个处理高精度问题&#xff0c;是很容易的一件事&#xff0c;对于我这刚学java的萌新来说&#xff0c;长见识了&#xff0c;确实比C方便 BigI…

HTML页面提交TABLE

在HTML页面里&#xff0c;提交一个TABLE需要把TABLE的值传入变量或json格式&#xff0c;然后submit到服务端的。 思路描述&#xff1a;将table里的值取出&#xff0c;放在json中&#xff0c;赋给一个input&#xff0c;通过一个input来实现table表数据提交到服务器&#xff0c;就…

生成条形码

https://packagist.org/packages/picqer/php-barcode-generator转载于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概览

GDScript 是上面提到的用于Godot的主要语言。和其他语言相比&#xff0c;它与Godot高度整合&#xff0c;有许多优点&#xff1a; 简单&#xff0c;优雅&#xff0c;设计上为Lua、Python、Squirrel等语言用户所熟悉。加载和编译速度飞快。编辑器集成非常令人愉快&#xff0c;有节…

Web 前端框架分类解读

Web前端框架可以分为两类&#xff1a; JS的类库框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依赖注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await对异步的处理

虽然co是社区里面的优秀异步解决方案&#xff0c;但是并不是语言标准&#xff0c;只是一个过渡方案。ES7语言层面提供async / await去解决语言层面的难题。目前async / await 在 IE edge中已经可以直接使用了&#xff0c;但是chrome和Node.js还没有支持。幸运的是&#xff0c;b…

《SQL Server 2008从入门到精通》--20180717

目录 1.触发器1.1.DDL触发器1.2.DML触发器1.3.创建触发器1.3.1.创建DML触发器1.3.2.创建DDL触发器1.3.3.嵌套触发器1.3.4.递归触发器1.4.管理触发器1.触发器 触发器是一种特殊的存储过程&#xff0c;与表紧密关联。 1.1.DDL触发器 当服务器或数据库中发生数据定义语言&#xff…

主成分分析原理解释(能力工场小马哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解释 在这一篇之前的内容是《Factor Analysis》&#xff0c;由于非常理论&#xff0c;打算学完整个课程后再写。在写这篇之前&#xff0c;我阅读了PCA、SVD和LDA。这几个模型相近&#xff0c;却都有自…