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方法:
- 将form data 保存在http的请求体
- 没有长度限制
- 安全的
- 往往在开发中用于提交数据form表单提交post
- 文件上传
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>
html--form表单常用操作相关推荐
- html表单的常用属性有哪些,html/form表单常用属性认识
1.form表单常用属性练习 .form1 { margin: auto; height: 900px; width: 500px; text-align: center; line-height: ...
- Element Ui 关闭对话框清空验证消息,清除form表单的操作
方法1 首先在对话框 取消按钮 添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
- vue 给form表单赋值_vue获取form表单的值示例
vue获取form表单的值示例 这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...
- Form表单, 4种常见的表单提交方式
浏览器行为:Form表单提交 1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name: ...
- Java入力项目无法设定到form_html中关于form与表单提交操作的资料集合
原标题:html中关于form与表单提交操作的资料集合 这里我们介绍一下form元素与表单提交方面的知识. form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLEle ...
- 第83天:jQuery中操作form表单
操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", ...
- jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
- 【解决回车键出现乱码的问题】禁用Enter键触发form表单提交的问题 ,同时启用保留textarea换行操作
问题描述 Enter键触发form表单提交的问题 ,同时启用保留textarea换行操作 ##解决回车键出现乱码的问题 代码如下(示例): <script type="text/jav ...
- 第5节 Selenium 操作form表单
from表单是我们经常测试的用例,绝大多数web程序都有,例如:用户登录.注册 form表单的流程是这样的: 1.定位表单元素 2.输入测试值 3.判断表单元素属性 4.获取表单元素属性 5.提交表单 ...
最新文章
- xxl-job 执行结果是空_空指针,段错误,这场面试我栽倒在这里了!
- fedora14编译安装skyeye-1.3.2
- JQ插件 jquery mobiscroll
- 程序猿的日常——JVM内存模型与垃圾回收
- tomcat 更新class自动重启
- 何凯明最新一作MAE解读系列1
- 九爷带你了解 nginx优化
- 玩转MongoDB—基本概念及初步使用
- Mission-Pumpkin v1.0: PumpkinGarden(南瓜花园)靶机的渗透测试
- 除法器的实现(恢复余数、不恢复余数、级数展开、Newton-Raphson)
- 【华为报考全攻略】华为考试自己如何报考?
- Boost在Windows XP运行的编译方法
- oracle 权限问题9017,深入浅出Oracle学习笔记(5)
- 「论文翻译」Predicting Drug-Target Interactions Using Weisfeiler-Lehman Neural Network
- chrome/chromium 上的内存管理模块-allocator介绍
- 辅助模块应用(auxiliary/scanner/portscan/tcp)
- Linux九阴真经之九阴白骨爪残卷11(并发访问控制和事务Transactions)
- NSIS 中的$DOCUMENTS
- linux posix 消息队列,实现posix消息队列示例分享
- 常用的css选择符,CSS选择器五大基本选择符
热门文章
- 线性序列机与串行接口ADC驱动设计与验证
- java 可忽略参数_如何使用“&var =”忽略URL参数
- 万能驱动xp离线版_教你用SC封装软件来封装XP系统
- python3闭包通俗解释_Python|闭包、装饰器,简单的实例,通俗的理解
- 文件被后台程序占用无法删除_win10重装后系统占用50G?只要做好这2步,运行比win7还快...
- onclick 源码_仿照React源码流程打造90行代码的Hooks
- python多线程写日志_python 应用logging多线程写多个log文件
- union all动态表_Excel VBA——动态显示图表
- sql between包括两端吗_SQL大全
- vue项目职责_进大厂兼职的机会来了!腾讯微校项目招人了!