html的表单标签(form)
目录标题
- 1、表单标签主要有三大类:
- 2、表单标签中常见的属性
- 3、例子代码及结果
- 4、注意:
- 5、表单中特殊的属性
表单标签可以用来数据交互,而前面学的六个标签只能发送不能接收。 表单标签的作用就是数据交互
1、表单标签主要有三大类:
- input 文本框
- select 下拉框
- textarea 文本域
2、表单标签中常见的属性
action属性:表示要提交的URL
method属性:表示http提交的方式,默认不写就是get
name属性:非常重要,name属性是表单标签最重要的属性,服务器进行数据接收时,会通过name判断。
3、例子代码及结果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>用户注册</title>
</head><body><h1>用户注册</h1><form action="#" method="post" enctype="multipart/form-data"><p>用户名称:<input type="text" name="username" required> </p><p><label for="mypass">用户密码:</label><input type="password" id="mypass" name="mypass"></p><p>用户性别:<input type="radio" value="男" name="gender">男<!-- 性别需要用到我们的单选框,所以要用到radio --><input type="radio" value="女" name="gender">女 </p><p>用户爱好:<input type="checkbox" value="LOL" name="hobby">LOL<input type="checkbox" value="王者农药" name="hobby">王者农药<input type="checkbox" value="篮球" name="hobby">篮球<!-- 多选框要用到checkbox --></p><p>用户邮箱:<input type="email" id="email" name="email"></p><p>用户博客:<input type="url" id="url" name="url"></p><p>用户头像:<input type="file" id="avatar" name="avatar"></p><p>出生日期:<input type="datetime-local"> <br><input type="date" name="" id=""> <br><input type="time"></p><p><input type="color"></p><p>用户年龄:<input type="number"></p><p><input type="week"></p><p><input type="range" max="10" max="0" value="9"></p><p>用户地址:<select name="address" id="address"><option value="陕西">陕西</option><option value="陕西">陕西</option><option value="陕西">陕西</option><option value="陕西">陕西</option></select></p><p>用户建议或者意见:<textarea name="" id="" cols="30" rows="10"></textarea></p><p><!-- 提交按钮要用到submit --><input type="submit" value="注册"><!-- 清空选项要用到reset --><input type="reset" value="重置"><input type="button" value="按钮"><input type="image" src=""></p></form>
</body></html>
get是以等于什么去传的,只能传字符串,不能传文件
post可以传文件
4、注意:
- html中有相应的邮箱格式,email类型
- 网址格式就是url类型
- 头像上传就是file类型
- 文件上传如下代码
<form action="#" method="post" enctype="multipart/form-data">
- 按钮就是button类型,但不会提交数据
- 图片提交按钮就是image类型,可以提交数据
- 出生年月日就是datetime-local类型
- 颜色就是color类型
- 年龄就是number类型
- 涉及到周就是week类型
- 拖动框就是range类型,范围0-10,值在9
<input type="range" max="10" max="0" value="9">
- 隐藏框就是hidden类型,提交一些看不见的数据
- 地址需要用到选择,如下:
<select name="address" id="address"><option value="陕西">陕西</option><option value="广西">广西</option><option value="桂林">桂林</option><option value="福建">福建</option>
</select>
5、表单中特殊的属性
- required属性表示有值才能提交
- readonly属性表示有值不能修改
- disabled属性表示不可用,与readonly类似
- placeholder属性表示选中
- autofocus属性表示自动聚焦
html的表单标签(form)相关推荐
- 表单标签form、label、input、textarea、select
表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 . 表单相关标签的使用 <form>标签 表示表单标签,定义整体的表单区域 <la ...
- 表单标签form的简单使用
表单就是一个放控件的地方,如文本框,密码框,按钮之类的,这些控件叫做表单元素. 表单的构成: <form action="提交地址">表单内容(包括按钮,输入框,选择框 ...
- html表单标签form怎样设置空隙,Smartform中表(table)的行间距设置
使用TCODE SMARTSTYLES 进入到style的设置界面,也可以直接从TCODE smartforms 里面进入. STYLE 分为三部分,header data, paragraph fo ...
- form表单标签的简单使用
文章目录 form表单标签``: - 1.作用:收集客户信息 注意:在写radio,checkbox(单选,多选)的时候,**一定要写name和value**:name属性是分组,value属性设置值 ...
- html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法 标签是 ...
- HTML——表单标签<form>与表单的实现
本人所用编辑器:vscode:使用浏览器为chrome 目录 1.基础知识 1.1基础知识详解 1.2action和method属性 1.3input标签 2.调查问卷的实现 2.1问卷及效果 2.2 ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- 一天搞定CSS:表单(form)--20
1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html><head><meta charset="UTF- ...
- Spring MVC之表单标签
为什么80%的码农都做不了架构师?>>> 序言 Spring自2.0开始,就开始全面支持表单标签. 使用表单标签的优点有: 简单 支持Model自动绑定 一.表单标签开发步骤 ...
- 2016年10月30日表单标签与样式表分类和选择器
今天上午讲的表单标签 <form name="表单"method="get" action="Untitled-2.html"> ...
最新文章
- UVA 216 Getting in Line
- SAP中关于物料主数据里物料类型的修改
- VTK:图片之ImageSinusoidSource
- makefile 基本总结
- 常用FTP命令 1. 连接ftp服务器
- 数据结构之平衡树:红黑树的介绍与Python代码实现——17
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 11丨产品销售分析 III【难度中等】
- oracle 10g rac数据库,oracle 10g rac安装报错集锦
- RecyclerListView的使用
- PowerDesigner教程系列(五)概念数据模型
- Java面试题-集合框架篇三
- php获取当月的天数,php获取当月的天数及上月第一天和最后一天等数据 - YangJunwei...
- python爬虫qq音乐_Python爬虫实战:采集全部QQ音乐歌曲
- 【计算机软件基础】如何理解鲁棒性Robust?
- mysql删库命令是啥_删除数据库的命令是什么?
- 30分钟让你成为photoshop钢笔工具…
- 常用的手机宽度 前端切图用 常用的手机尺寸
- onchange与onpropertychange
- kinectfusion的详细介绍
- SAP BW实施实时报表的方法(流式处理链)
热门文章
- python内存泄露问题定位:附带解决pyrasite timed out
- html桃花源码,HTML过滤 - 桃花源 - OSCHINA - 中文开源技术交流社区
- 卓训教育:孩子不爱思考怎么办,优秀的父母都会这么做
- html css javascript 在手机ui中,Vuejs 配合 mint-ui 开发移动端web__Vue.js__前端__CSS__JavaScript...
- MySQL常用数据库引擎
- python 视频库_Python视频编辑库:MoviePy
- 分布式事务 - Seata - TCC模式
- python --while 练习2
- 深圳天虹做java开发_Apache Storm 2.0.0 发布,基于 Java ​​​​​​​的新架构
- Spring = Spring拦截器之实现原理?