HTML5 表单元素

 2023-09-10 阅读 27 评论 0

摘要:创建表单 form标签用于创建一个表单,会将表单里面的内容一起发送服务器,结构类似于表格表单中的其他元素都要包含在form标签中 form元素属性: action:必须。指定表单发送的地址(服务器地址)method:表单数据发送服务器的方法

创建表单

  • form标签用于创建一个表单,会将表单里面的内容一起发送服务器,结构类似于表格
  • 表单中的其他元素都要包含在form标签中

form元素属性:

  • action:必须。指定表单发送的地址(服务器地址)
  • method:表单数据发送服务器的方法,常用的有两种:get/post,默认get方法
  • name:用来为当前表单定义一个独一无二的名称,控制表单与后台程序之间的关系
  • novalidate:设置数据提交时不进行验证,通常不会用到
  • target:设置目标窗口打开方式,通常不会用到

get和post区别:

  • get方法:数据会附在网址之后提交给服务器,不安全;数据量很小
  • post方法:数据不会附在网址之后,会将表单中的所有数据进行打包发送服务器,等待服务器读取。安全过程。数据不受限制。是使用最多的提交方法

注意:

  • 表单接收程序,放在服务器环境中
  • 表单发送地址,一定要填写完整,加上http://

表单控件

input元素是最常用的表单控件

html有哪些基本元素,input元素属性:

  • type属性:必须。指定输入内容的类型,默认为text,单行文本框
  • name属性:必须。传递参数时的参数名称,表单接收找的就是name属性值
  • value属性:输入框中的默认值。value值会发送到服务器
  • placeholder属性:输入框中的默认值,在文本框获得焦点时被清空;默认值不会发送到服务器
  • maxleng属性:控制输入的最多的个数,包括英文、数字、汉字等
  • disabled属性:设置为不可用,不可操作,不能修改,不提交到服务器;用于格式提示
  • autofocus属性:让输入框自动获得焦点,打开页面以后,光标自动处于编辑状态
  • autocomplete属性:属性值:on/off。定义是否开启浏览器自动记忆功能
  • required:规定必须在提交前填写输入字段,不填写不能提交

type属性值:

  • text:可以输入任何类型的文本,数字、汉字、字母;输入的内容以单行显示
  • password:输入的字符会以圆点或星号显示;输入的内容会被隐藏
  • submit:提交按钮;点击后将数据发送到服务器,可以用value改变按钮名称
  • reset:清空输入框中的内容,可以用value改变按钮名称
  • button:定义一个可以点击的按钮,但是没有任何的行为,没有任何的样式。可以用value改变按钮名称,常用于点击按钮时启动js程序
  • hidden:隐藏域不会显示在页面中,一般是网页设计者设置好的数据;表单提交时,隐藏域中的value会提交到服务器
  • number:专门用来输入数字,其他类型不能输入。min:允许输入的最小值;max:允许输入的最大值;step:步长
  • range:活动条;与number类型类似,也是表示一定范围的数值输入,但是以一个活动条的状态显示。min:允许输入的最小值;max:允许输入的最大值;step:步长
  • radio:单选框;name属性值必须设置成相同属性值;向服务器发送的是value值;checked设置默认选中状态
  • checkbox:复选框;name属性值必须设置成相同属性值,在属性值后加上中括号,向服务器发送的是value值;checked设置默认选中状态

多行文本输入框

textarea标签:多行文本输入框

  • 文本输入区域可以容纳无限数量的文本
  • 多行文本输入框和单行文本输入框的属性差不多
  • 可以在表单之外使用

下拉列表

select标签:表示创建下拉列表

option标签:表示每一个下拉列表项

HTML表格标签。optgroup标签:用来对option进行分组;使用label属性设置分组名称

  • 向服务器发送的是value值
  • size属性设置下拉列表显示多少个列表项
  • multiple属性可以定义多选
  • 多选时,name属性值后应加上中括号“[ ]”

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/4/39736.html

上一篇:CSS3 常用技巧
下一篇:CSS3 背景属性

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息