初学者:html中的表单详解(下面附有代码)
表单的理解与解释
表单:采集不同类型的用户输入数据,发送给服务器,实现用户和服务器之间的数据交互。
表单标签form 声明数据采集的范围,只要是在form中的,都是要采集的数据。
一个页面中可以有多个form标签,只能是并列关系,不能嵌套。只能是兄弟关系,,不能是父子关系。用户向服务器端发送数据时,一次只能提交一个表单中的数据。如果要提交多个表单就需要用js中的异步交互。
表单元素 method属性:提交表单时所用的http方法,默认为get方法。
get方式:将数据作为url地址的一部分发送给服务器:安全性较低,有长度限制:请求的数据可以被缓存,能够保存在浏览器的历史记录中能作为书签被收藏。
post方式:将数据隐藏在http数据流中进行传输:安全性比get方式要高,
对数据长度没有限制:请求数据不会被缓存,也不会在浏览器的历史记录中保存,更不会作为书签被收藏。
https://www.baidu.com/?username=11&psd=12 get方式,这是提交之后的网址 https://www.baidu.com/?参数名=参数值&参数名=参数值
?是连接符,后面是提交的内容。
input表单域
单行文本输入框
<input type=**”password”**placeholder=”请输入账号”>密码框
提交按钮
- 性别:女男
- **设置性别时必须都写上name=”sex”必须设置相同的name值才能实现单选** **checked是默认选中项,即为一单击进来,默认选中的就是男**
<li>爱好:<input type=**"checkbox"** name="hob"/>吃饭<input type**="checkbox"** name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭</li> **复选框**
- 普通按钮,既不会重置也不会提交
- 设置button能提交
- button经过设置也能变成提交按钮和重置按钮。
扩充一句面试题:
button按钮的默认类型为:提交上传文件
注意:后台上传文件,必须在form表单中添加enctype属性
即为:图片形式的按钮
-
placeholder和value的区别
作为占位符来说:value输入的时候需要把请输入账号,这几个字删掉之后在后面才能输入。而placeholder直接能输入
还有一个区别:placeholder仅仅是用来设置提示信息的,而value是用户输入的内容就直接保存在value。
select下拉列表
因为加了selected 所以朝阳区是默认选中的。selected是设置下拉列表的默认选中项。
文本输入框
但是这样的文本框大小是可以改变的。但是在style样式中加入resize:none属性,样式就不会改变了。就设置成了禁止拖动文本框的大小。
label表单标注标签,扩大点击范围。
比如下图:
只能点击到框里面才有用,扩大点击范围之后,点在框的旁边也有用。
一般与单选按钮,复选框组合使用。关联式方式:
disabled属性:禁用表单元素,被禁用的元素不可用,不可点击,不会被提交
readonly属性:只读属性,不能修改,可以被提交代码参考如下:
```css <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><table><tr><th><span>*</span>邮箱地址:</th><td><div><input type="text" disabled="disabled"><img src="./img/regBg.jpg" alt="注册"><a href="#">我没有邮箱</a><!--input img a都是行内元素,所以这三个放在一个td里面也能在同一行显示--><!--有两行内容,所以给了一个div标签--></div><p>使用微博账号直接<a href="#">登录</a></p></td></tr><tr><th><span>*</span>设置密码:</th><td><input type="password" /></td></tr><tr><th><span>*</span>兴趣标签:</th><td><input type="checkbox" name="hob" id="new"/><label for="new">新闻</label><input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻<input type="checkbox" name="hob" />新闻</td></tr><tr><th><span>*</span>验证码:</th><td><input type="text" /><img src="img/yanzhengma.jpg" alt="验证码"><a href="#">看不清?</a></td></tr><tr><th></th><!--空的th占位--><td><input type="submit" value="立即注册"/></td></tr><tr><th></th><td><a href="#">《新浪网络服务协议》</a></td></tr></table><body></body> </html>
```图示如下:
代码如下:<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">textarea{resize: none;}li{list-style: none;}</style></head><body><form action="#" enctype="multipart/form-data"><ul><li>账号:<input type="text" name="useId" placeholder="请输入账号" /></li><li>密码:<input type="password" name="psd" placeholder="请输入密码" /></li><li>性别:<input type="radio" name="sex" checked="checked"/>女<input type="radio" name="sex"/>男</li><li>爱好:<input type="checkbox" name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭<input type="checkbox" name="hob"/>吃饭</li><input type="file" /> 上传文件<li><input type="image" src="./1.jpg" alt="提示文字" width="50px" height="50px"/></li><li>籍贯:<select><option value="北京">北京</option><option value="上海">上海</option><option value="深圳">深圳</option></select><select><option value="海淀区">海淀区</option><option value="朝阳区" selected>朝阳区</option><option value="通州区">通州区</option></select></li><textarea rows="5" cols="5"></textarea><li><input type="submit" value="提交" /></li><li><input type="reset" value="重置" /></li><li><input type="button" name="" id="" value="普通按钮" /></li><li><button type="submit" >设置button能提交</button></li><li><button>button</button></li><!--button默认类型为提交--></ul></form></body> </html>
图示如下:
时间比较紧迫,没有写详细样式,以上供大家参考。
初学者:html中的表单详解(下面附有代码)相关推荐
- js入门·表单详解一(修改表单属性,修改表单元素值)
实在javascript入门·Document对象入门讲解(访问表单,创建新页,获取页标题) 一文中,我们已经把表单的一些基本访问等弄清楚了,下面我们深入的学下表单的属性以及对表单元素的简单操作! 演 ...
- 菜鸟教程:HTML表单详解
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.表单元素form 二.form元素的属性 1.action 2.method 3.enctype 4.注意事项 三 ...
- form提交后台注解拿不到数据_Form表单详解
主要内容Form表单.表单元素.表单元素的属性.HTML5新增type类型和HTML新增属性 知乎视频www.zhihu.com 知乎视频www.zhihu.com 知乎视频www.zhihu. ...
- HTML第三章 form表单(详解,内含详细代码示例)
目录 1.特点 2. 表单的语法和属性 3. input元素 4. select和下拉选择框 5. textarea多行文本域 6.label关联控件 每日一句 1.特点 提供了一些可视化的输入控件 ...
- hive 临时表 with_Kettle(PDI)转换中输入表输入详解
概述 Table input(表输入)此步骤使用SQL语句从连接的数据库中读取信息.通过单击获取SQL查询语句按钮,可以自动生成基本SQL语句. 选项 Table input(表输入)步骤有以下选项: ...
- Form 表单详解:案例、CSS 美化
本文要点: 常见表单 表单的性质 表单CSS美化 使用 radio 实现 Tab 选项卡 什么是表单 用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
- java获取文件大小_Java中获取文件大小的详解及实例代码
Java 获取文件大小 今天写代码时需要实现获取文件大小的功能,目前有两种实现方法,一种是使用File的length()方法:另外一种是使用FileInputStream的available()方法, ...
- Linux中的/proc文件系统详解(C/C++代码实现)
Linux /proc这个特殊的目录包含有关Linux系统的所有详细信息,包括其内核.进程和配置参数.通过研究/proc目录,可以了解Linux命令的工作原理,甚至可以执行一些管理任务. 走进Linu ...
- 2023年MathorCup 高校数学建模挑战赛-A 题 量子计算机在信用评分卡组合优化中的应用-思路详解(模型代码答案)
一.题目简析 运筹优化类题目,不同于目标规划,该题限制了必须使用量子退火算法QUBO来进行建模与求解.本身题目并不难,但是该模型较生僻,给出的参考文献需要耗费大量时间去钻研.建议擅长运筹类题目且建模能 ...
- ES6中Reflect对象使用详解(附代码)
目录 目录 Reflect的方法 Reflect.get(target, name, receiver) Reflect.set(target, name, value, receiver) Refl ...
最新文章
- 爬虫之selenium控制浏览器执行js代码
- 刚开始走向工作岗位初遇到的一些问题
- c语言为什么提供函数声明机制,通过实战理解C语言精要——函数篇
- 电费结算(electric)
- 感知机(python实现)
- 去除HTML标签--SQL写法
- C/C++开发游戏项目之《智能图形界面-贪吃蛇》
- Struts2 POI 导入导出Excel数据
- 发现个好玩的,去页面敲键盘,页面键变色
- 古董笔记本伪装成双核 1G内存 120G硬盘
- python 协程进阶
- 解决linux 连接网络但不能上网问题
- 打开 codeblocks 出现 ntvdm.exe 停止工作
- getsockopt、setsocketopt、ioctlsocket和WSAIoctl 详解
- 网络高清车载云台摄像机,白光云台摄像机激光云台摄像机
- [内附完整源码和文档] 基于JAVA的酒店住宿管理系统
- powerlink源码解析与使用
- 靠画画,我成功收获到了人生中第一桶金
- wiki上关于CUDA的介绍(显卡算力查询)
- 场效应管图形符号、特性、说明解析-KIA MOS管
热门文章
- lisp 圆柱螺旋线_Visual LISP开发三维圆柱螺旋线程序
- 又一个程序员倒下-程序员防猝死指南
- 文字烫金效果html,PS教程之3D烫金艺术文字效果制作
- MySQL主从1205报错【转】
- 题解1205汉诺塔问题
- 猫加路由加服务器加交换机怎么配置文件,猫和路由器以及交换机的连接方法[图解]...
- vmware虚拟服务器数据备份,备份VMware虚拟机的方法!
- C++递归完成汉诺塔游戏(超详细解读)
- ESXI VM快照删除卡在99%
- MySQL数据库进阶知识