您现在的位置是:首页 > 技术教程 正文

html的form标签的基本介绍及使用

admin 阅读: 2024-03-28
后台-插件-广告管理-内容页头部广告(手机)

目录

前言

1.什么是form标签

1.1 基本介绍

1.2 form标签的相关属性

1.2.1 action属性

1.2.2 method属性

1.2.3 name属性

2.form标签的元素

2.1 input元素

2.1.1 text

 2.1.2  password

 2.1.3 submit

 2.1.4 radio

2.1.5 checkbox

2.1.6 button

2.1.7  html5新增的属性

2.2 input元素的其他属性

2.2 select元素(下拉列表)与option元素

2.3  textarea元素

总结


前言

什么是表单?表单是html用与搜集不同类型的用户输入表单是一个区域,用来采集信息。


1.什么是form标签

1.1 基本介绍

form标签是html中重要的组成部分,是用与搜集不同类型的用户所输入的信息,form标签以开始,以结束。

1.2 form标签的相关属性

1.2.1 action属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

1.2.2 method属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

getpost
表单数据以值得方式追加到URL中表单数据不会追加到URL,会隐藏显示
用于提交非敏感数据可提交敏感数据

注释:GET 最适合少量数据的提交。浏览器会设定容量限制。

1.2.3 name属性

一个页面上的表单可能不止一个,为了区分这些表单,就需要name 属性给表单命名,通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

2.form标签的元素

2.1 input元素

input元素是最重要的表单元素

input元素根据不同的type属性,可以变化为多种形态。

2.1.1 text

  定义供文本输入的单行输入字段:

列如

        用户名:

       

 

以上代码在浏览器中看上去时这样的:

 2.1.2  password

 定义密码字段

列如

 

        密码:

       

   

以上代码在浏览器中看上去时这样的:

 2.1.3 submit

    定义提交表单数据至表单处理程序的按钮。

列如

       

   

以上代码在浏览器中看上去时这样的:

注释:submit可以通过value属性改变浏览器上所显示的内容

 2.1.4 radio

定义单选按钮。

列如

以上代码在浏览器中看上去时这样的:

2.1.5 checkbox

定义复选框。

列如

足球

篮球

lol

韩剧

王者荣耀

以上代码在浏览器中看上去时这样的:

2.1.6 button

 

2.1.7  html5新增的属性

类型作用
number 限制输入为数字才能生效 
email 限制输入为邮箱才能生效    
color    获取焦点后会弹出颜色选择器    
date日期选择器会出现在输入框中
range  能够显示滑块字段
month    日期选择器(月份)
week 日期选择器(周)    
time   时间选择器    
datetime  时间选择器 
datatime-clocle   日期选择器    
tel   电话输入
url    在提交时能够自动验证 url 字段。
search  用于搜索字段(搜索字段的表现类似常规文本字段)

     

2.2 input元素的其他属性

checked:设置单选框、复选框,初始状态是选中,属性值仅有checked。

disabled:设置首次加载禁用该元素,属性值仅有disabled,表示该元素被禁用。

maxlength:设置文本框输入的最大字符数。

readonly:只读,表示文本框的内容不允许用户直接进行修改。

size:设置该元素的宽度。

src:设置图像域所显示的图像的URL。

2.2 select元素(下拉列表)与option元素

           

           

           

           

       

以上代码在浏览器中看上去时这样的:

2.3  textarea元素

 

以上代码在浏览器中看上去时这样的:

 


总结

form表单时html的重要组成部分,以上时form标签的一些基本介绍。

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索