HTML(表单标签<form>)
1.一般表示方法
1.表示方法——<form action="跳转的路径" name="表单的名字" method="跳转的请求方式">
注意:
①路径表达
绝对路径: 从盘符开始查找,直到找到文件为止,路径+文件名
相对路径:当前文件和目标文件的相对路径
②method跳转的请求方式
(post或者get)
默认的是get请求
get请求:不安全
post请求: 相较于安全(键入信息不显示在地址栏上)
2.form表单子标签(<form>子标签</form>)
{1},<input type="属性">标签
1.<input type="text">——文本框
<form>
<p>用 户 名:<input type="text"></p>
</form>
2.<input type="password">——密码框
<form>
<p>密 码:<input type="password"></p>
</form>
3.<input type="submit">——提交按钮
<form>
<p><input type="submit"></p>
</form>
4.<input type="radio">——单选按钮(可以给一些属性使其成为多选一)
<form>
<p>用户性别:<input type="radio" name="gender" checked>男<input type="radio" name="gender">女
</p>
</form>
5.<input type="checkbox">——多选按钮
<form>
<p>您的爱好:<input type="checkbox">乒乓球<input type="checkbox">象棋<input type="checkbox">科技<input type="checkbox">篮球<input type="checkbox">围棋</p>
</form>
6.<input type="reset">——复位按钮 重置按钮
<form>
<p><input type="reset"></p>
</form>
7.<input type="button">——按钮(可添加名称和其他属性)
<form>
<p><input type="button"></p>
</form>
8.<input type="image">——图像按钮(可进行跳转)
<form>
<p><input type="image" src="C:\Users\Administrator\Desktop\图片\OHR.HyacinthMacaws_ZH-CN1191345036_1920x1080.jpg" width="400px"></p>
</form>
图片来源:必应每日壁纸潘塔纳尔湿地的风信子金刚鹦鹉,巴西 (© David Pattyn/Minden Pictures) (2021-10-01)http://bing.plmeizi.com/view/1953 注:
①src="路径"
②width="宽" ;(width:宽,height:高)(只设置一个图片按比例放大)
③ px:像素
9.<input type="file">——上传文件 文件域
<form>
<p>用户头像:<input type="file"></p>
</form>
10.<input type="email">——邮箱
<form>
<p>邮箱:<input type="email" placeholder="请输入您的邮箱"></p>
</form>
11.<input type="color">——颜色
<form>
<p><input type="color"></p>
</form>
12.<input type="date">——日期
<form>
<p><input type="date"></p>
</form>
13.<input type="datetime-local">——日期+时间
<form>
<p><input type="datetime-local"></p>
</form>
14.<input type="time">——时间
<form>
<p><input type="time"></p>
</form>
15.<input type="url">——统一资源定位符,
"url"
类型的<input>元素 用于让用户输入和编辑URL。在提交表单之前,会自动验证输入值以确保其为空或正确格式的URL。
<form>
<p><input type="url"></p>
</form>
16.<input type="range">——进度条
<form>
<p><input type="range"></p>
</form>
扩展:
readonly——使字段只能读不能修改(可以选中但不能修改)(文本框类)
disabled——使字段不可选中以及修改(灰色的文本框)
autofocus——默认光标的位置
required——提示Input不能为空白提交
checked——默认选中(4.)中实例
placeholder="文字"——框内显示"文字"但选中框时“文字”消失
value——可以给按钮类添加名称;给文本框添加内容
hidden——隐藏域 用户页面上是看不见的内容 作用 提交一些用户不可见的信息(用在一些标签后面)
{2},<select>标签
1.<option>——子选项 (下拉列表框的选项)——标签
2.<select multiple="multiple">——- 以列表的形式显示 —— 属性
3. <option selected="selected">内容</option>——默认选择某一个选项
<form>
<p>您的家庭住址是:<select><option>请选择您的家庭住址</option><option>郑州</option><option selected="selected">兰州</option><option>杭州</option><option>苏州</option></select></p>
</form>
一般形式
<form>
<p>您的家庭住址是:<select multiple="multiple"><option>请选择您的家庭住址</option><option>郑州</option><option selected="selected">兰州</option><option>杭州</option><option>苏州</option></select></p>
</form>
2中的列表形式
{3},<textarea>标签
1.<textarea>内容</textarea>——文本域
① <textarea cols="数值" rows="数值">
cols——文本域的宽度 rows——文本域的高度
<form>
<pre>您的建议或者意见:<textarea cols="25" rows="10" placeholder="您的建议或者意见:"></textarea></pre>
</form>
{4},其他标签
1.<font size="数值">字体</font>(1-7 字大小由小到大)
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"> ...
最新文章
- Python构建lassocv模型并输出Rad-score公式
- 新手探索NLP(十一)——知识图谱
- Google在中国打败百度的方法其实很简单.只要需改变5点.
- 软件构架实践读书笔记二
- 团队-团队编程项目作业名称-模块测试过程
- html5添加随机率,HTML5 canvas 绘制随机曲线 并实现放大功能
- 长沙计算机学校首问 长沙大计校区电话,长沙有哪些中专学校,长沙中专学校名单一览表...
- 推荐四十多条纯干货 Java 代码优化建议
- .net获取客户端信息(二)ashx部分
- 使用IntelliJ调试Java流
- java 异步得到函数返回值_使用JavaScript进行异步编程
- [] __nw_connection
- 关于局云混合的新思路
- Thinkpad常见问题大全(转载联想工程师博客)
- 便宜的前端培训班都有哪些?
- 记前两天的中兴移动笔试以及迅雷笔试
- HTML 文本格式化
- CSS层叠性(重要)
- 贪吃蛇二代 —— 穿墙版(C语言实现)
- android高德:定位蓝点定位到非洲问题
热门文章
- Fatal: HttpRequestException encountered.
- Echarts生成广东省地图
- 微信小程序基础之开源项目库汇总
- [wayfarer]PetShop之ASP.NET缓存
- LIVE MINI ESP32开发板教程系列(三)drv2605L模块+手机常用振动器实现117种震动效果
- GSM信令流程[转]相当不错
- Springboot集成Swagger报错Parameter 0 of method linkDiscoverers in org.springframework.hateoas.config.Hat
- 设计模式之游戏--观察者模式详解
- 温暖的光,坚定的飞翔
- 台式计算机网卡型号怎么查找,台式机无线网卡如何查看型号