HTML表单-程序员宅基地

技术标签: 前端  html  

基本结构

一个完成功能的表单包含如下3部分:包含框、输入框和提交按钮
form元素:表示表单,是一个包含框,包含了所有关于表单的元素
input元素:表单域对象,是一个输入框。

<form>
	<input type="text" />
	<input type="submit" value="提交" />
</form>

表单元素

form:定义表单
input:定义文本域
textarea:定义输入域
select:定义下拉菜单和列表框
option:定义下拉菜单和列表选项
buttion:定义表单发送按钮
optgroup:定义下拉选项组
label:定义表单控制标签
isindex:定义简单的输入框
datalist:指定输入控件的预定义选项列表

<form>
	<label for="">姓名:</label>
	<input type="text" /><br />
	<label for="">性别:</label>
	<label for="man"></label>
	<input type="radio" id="man" name="ager" value=男"" checked/>
	<label for="wman"></label>
	<input type="radio" id="wman" name="ager" value="" checked/><br 
	<label for="like">爱好:</label>
	<select name="like" id="like">
		<option value="篮球">篮球</option>
		<option value="排球">排球</option>
		<option value="羽毛球">羽毛球</option>
	</select><br />
	<label for="">婚姻:</label>
	<input type="checkbox" id="hun" name="hun" value="已婚" checked/>
	<label for="hun">已婚</label>
	<input type="checkbox" id="hun" name="hun" value="未婚" checked/>
	<label for="hun">未婚</label><br />
	<label for="">自我描述:</label><br />
	<textarea name="" id="" cols="30" rows="10"></textarea><br />
	<input type="submit" value="提交"/>
</form>

form元素

form元素负责数据的收集打包和发送

enctype属性

将表单中输入的数据发送到服务器时,浏览器使用的编码类型
一共有三个值:
application/x-www-form-urlencoded:将表单中的数据以名/值对的形式发送给服务器,一般是默认值
multipart/form-data:将表单中的数据编码为一条消息,每个表单域对应消息中的一个部分,然后通过HTTP方式发送到服务器
如:JOSN的数据格式
text/plain:将数据以纯文本的方式进行编码,不经常使用

action属性

设置表单提交数据的目标文件,它可以是任意位置任何类型的文件。该文件包含服务器端脚本的处理文件。可以结合JavaScript进行数据处理

method属性

处理表单数据的方法get或post
get方法:从服务器上获取数据
post方法:向服务器上传数据
区别:1.传输方式不同:get将数据以名/值对的形式添加到action所设置的URL后面,并使用?链接URL,各个变量之间使用&链接
post将表单中的数据放在数据体中,按照变量和值相对应的方式传递到action所指向的url
2.get传递的数据会浏览器地址栏展示,对于用户信息保护不好;get传递的数据对于用户来说是不可见的,信息比较安全
3.get传递的数据量小,post可以传递大量数据
4.get中,数据在URL中传输必须使用ASCII字符;post没有字符集的限制

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41807399/article/details/137293118

智能推荐

874计算机科学基础综合,2018年四川大学874计算机科学专业基础综合之计算机操作系统考研仿真模拟五套题...-程序员宅基地

文章浏览阅读1.1k次。一、选择题1. 串行接口是指( )。A. 接口与系统总线之间串行传送,接口与I/0设备之间串行传送B. 接口与系统总线之间串行传送,接口与1/0设备之间并行传送C. 接口与系统总线之间并行传送,接口与I/0设备之间串行传送D. 接口与系统总线之间并行传送,接口与I/0设备之间并行传送【答案】C2. 最容易造成很多小碎片的可变分区分配算法是( )。A. 首次适应算法B. 最佳适应算法..._874 计算机科学专业基础综合题型

XShell连接失败:Could not connect to '192.168.191.128' (port 22): Connection failed._could not connect to '192.168.17.128' (port 22): c-程序员宅基地

文章浏览阅读9.7k次,点赞5次,收藏15次。连接xshell失败,报错如下图,怎么解决呢。1、通过ps -e|grep ssh命令判断是否安装ssh服务2、如果只有客户端安装了,服务器没有安装,则需要安装ssh服务器,命令:apt-get install openssh-server3、安装成功之后,启动ssh服务,命令:/etc/init.d/ssh start4、通过ps -e|grep ssh命令再次判断是否正确启动..._could not connect to '192.168.17.128' (port 22): connection failed.

杰理之KeyPage【篇】_杰理 空白芯片 烧入key文件-程序员宅基地

文章浏览阅读209次。00000000_杰理 空白芯片 烧入key文件

一文读懂ChatGPT,满足你对chatGPT的好奇心_引发对chatgpt兴趣的表述-程序员宅基地

文章浏览阅读475次。2023年初,“ChatGPT”一词在社交媒体上引起了热议,人们纷纷探讨它的本质和对社会的影响。就连央视新闻也对此进行了报道。作为新传专业的前沿人士,我们当然不能忽视这一热点。本文将全面解析ChatGPT,打开“技术黑箱”,探讨它对新闻与传播领域的影响。_引发对chatgpt兴趣的表述

中文字符频率统计python_用Python数据分析方法进行汉字声调频率统计分析-程序员宅基地

文章浏览阅读259次。用Python数据分析方法进行汉字声调频率统计分析木合塔尔·沙地克;布合力齐姑丽·瓦斯力【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)035【摘要】该文首先用Python程序,自动获取基本汉字字符集中的所有汉字,然后用汉字拼音转换工具pypinyin把所有汉字转换成拼音,最后根据所有汉字的拼音声调,统计并可视化拼音声调的占比.【总页数】2页(13-14)【关键词】数据分析;数据可..._汉字声调频率统计

linux输出信息调试信息重定向-程序员宅基地

文章浏览阅读64次。最近在做一个android系统移植的项目,所使用的开发板com1是调试串口,就是说会有uboot和kernel的调试信息打印在com1上(ttySAC0)。因为后期要使用ttySAC0作为上层应用通信串口,所以要把所有的调试信息都给去掉。参考网上的几篇文章,自己做了如下修改,终于把调试信息重定向到ttySAC1上了,在这做下记录。参考文章有:http://blog.csdn.net/longt..._嵌入式rootfs 输出重定向到/dev/console

随便推点

uniapp 引入iconfont图标库彩色symbol教程_uniapp symbol图标-程序员宅基地

文章浏览阅读1.2k次,点赞4次,收藏12次。1,先去iconfont登录,然后选择图标加入购物车 2,点击又上角车车添加进入项目我的项目中就会出现选择的图标 3,点击下载至本地,然后解压文件夹,然后切换到uniapp打开终端运行注:要保证自己电脑有安装node(没有安装node可以去官网下载Node.js 中文网)npm i -g iconfont-tools(mac用户失败的话在前面加个sudo,password就是自己的开机密码吧)4,终端切换到上面解压的文件夹里面,运行iconfont-tools 这些可以默认也可以自己命名(我是自己命名的_uniapp symbol图标

C、C++ 对于char*和char[]的理解_c++ char*-程序员宅基地

文章浏览阅读1.2w次,点赞25次,收藏192次。char*和char[]都是指针,指向第一个字符所在的地址,但char*是常量的指针,char[]是指针的常量_c++ char*

Sublime Text2 使用教程-程序员宅基地

文章浏览阅读930次。代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大、灵活的编辑器,相信你和我一样,都不会例外。我用过的编辑器不少,真不少~ 但却没有哪款让我特别心仪的,直到我遇到了 Sublime Text 2 !如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号。它小巧绿色且速度非

对10个整数进行按照从小到大的顺序排序用选择法和冒泡排序_对十个数进行大小排序java-程序员宅基地

文章浏览阅读4.1k次。一、选择法这是每一个数出来跟后面所有的进行比较。2.冒泡排序法,是两个相邻的进行对比。_对十个数进行大小排序java

物联网开发笔记——使用网络调试助手连接阿里云物联网平台(基于MQTT协议)_网络调试助手连接阿里云连不上-程序员宅基地

文章浏览阅读2.9k次。物联网开发笔记——使用网络调试助手连接阿里云物联网平台(基于MQTT协议)其实作者本意是使用4G模块来实现与阿里云物联网平台的连接过程,但是由于自己用的4G模块自身的限制,使得阿里云连接总是无法建立,已经联系客服返厂检修了,于是我在此使用网络调试助手来演示如何与阿里云物联网平台建立连接。一.准备工作1.MQTT协议说明文档(3.1.1版本)2.网络调试助手(可使用域名与服务器建立连接)PS:与阿里云建立连解释,最好使用域名来完成连接过程,而不是使用IP号。这里我跟阿里云的售后工程师咨询过,表示对应_网络调试助手连接阿里云连不上

<<<零基础C++速成>>>_无c语言基础c++期末速成-程序员宅基地

文章浏览阅读544次,点赞5次,收藏6次。运算符与表达式任何高级程序设计语言中,表达式都是最基本的组成部分,可以说C++中的大部分语句都是由表达式构成的。_无c语言基础c++期末速成