HTML之(表单的常用标签)

HTML之(表单的常用标签)

表单

1.简介

表单是一个包含若干表单元素的区域,用于回去不同类型东东用记信息

表单元素是允许用户在表单中输入信息的元素,如:文本框、密码框、单选按钮、复选框、下拉按钮、列表等

2.表单结构

2.1表单的语法

多个表单元素

2.2form标签

用来定义表单,可以包含多个表单元素

常用属性:

action提交数据给处理,即处理数据的程序,默认为当前页面,并且以查询字符串的形式来表现

method提交数据的方式,取值:get(默认)、post

get和post的区别:

​ get:以查询字符串形式提交,在地址栏中能够看到,长度有限制,不安全

​ post:以表单数据组形式提交,在地址栏中看不到,长度无限制,安全

enctype:提交数据的编码,取值:application/x-www-form-urlencode(默认)、multipart/form-data(文件上传)

3.表单元素

大多数表单元素都是使用标签来定义,通过设置type属性来定义不同的表单元素

表单元素的类型含义说明text单行文本框省略时默认就是textpassword密码框输入时以点号显示,安全redio单选按钮只能选择其中一个checkbox复选框可以同时选择多个submit提交按钮提交表单数据reset重置按钮重置表单元素的初始值image图像按钮可以使用图片作为按钮button普通按钮默认情况下无功能file文件选择器选择要上传的文件hidden隐藏域在页面上不显示,但是会提交,可以用来存储数据3.1单行文本框

常用属性:

name属性:名称,很重要,如果没有指定name,则该表单元素的数据是无法提交的value属性:当用户没有输入数据时,文本框中的默认值size文本框显示宽度maxlength最大字符数,默认字符数readonly:只读readonly=“readonly”,可以简写readonly,即只写属性名disabled:不可用,禁用disbled=“disabled” 可以简写disabled,完全被禁用

​ readonly和disabled的区别:readonly的数据会提交,而disabled的数据不会提交

3.2单选按钮

常用属性

name:名称,多个radio的name属性必须相同,才可以实现互斥(单选)value:值checked是否被选中,两种状态,选中,未选中 checked="checked"简写“checked”

3.3 复选框

常用属性与radio类似

3.4 文件选择器

常用属性:

name属性:名称

accept设置可以选择的文件类型,用来限制上传文件的类型

使用MIME格式字符串对资源类型进行限制

常用MIME类型:

纯文本:text/plain text/heml text/xml图像:image/png image/gif image/jpeg

代码:

Document

用户注册

用户名:


密 码:


年 龄:


性 别:


爱 好:

吃饭

睡觉

打豆豆


头 像:




案例:

4.特殊表单元素

表单元素含义说明select下拉列表option列表选项optgroup选项组用来对option分组textarea文本域/多行文本框用于创建一个多行文本框4.1 下拉列表

select 常用属性:

name属性size:下拉列表所显示的行数,同时显示多个选项multiple允许同时选择多个

option常用属性:

value选项值selected设置默认选中的项

optgroup常用属性:

table分组的标题

4.2 文本域

常用属性:

name:名称rows行数cols列数

代码:

Document

学历


城市:


个人简介:


服务协议:


案例:

相关推荐

王俊凯怕虫算什么,男明星的花式恐惧症一个比一个离奇
365bet亚洲版登陆首页

王俊凯怕虫算什么,男明星的花式恐惧症一个比一个离奇

📅 08-06 👁️ 3718
刘涛丈夫身高是多少 刘涛儿女像混血宝宝
365bet亚洲版登陆首页

刘涛丈夫身高是多少 刘涛儿女像混血宝宝

📅 07-15 👁️ 3521
鲶鱼世界产地在哪里 鲶鱼哪里产的最好
365bet亚洲版登陆首页

鲶鱼世界产地在哪里 鲶鱼哪里产的最好

📅 07-04 👁️ 5354