HTML的表单使用小结

一、表单

表单元素的格式


表单的语法

二,常用表单元素

1.文本框(text)

可用于输入用户名等用途。

文本框的基本格式

2.密码框(password)

用于输入密码,输入的内容会变成小圆点。

密码框的基本格式

3.单选按钮(radio)

性别选择等可以用到单选按钮。

单选按钮的用法(checked表示默认)

4.复选框(checkbox)

用于多项选择。

.复选框的用法(checked表示默认)

5.下拉列表(select和option)

下拉列表的具体应用
下拉列表的用法

6.按钮(submit,reset,image)

表示提交、重置、图片按钮
具体实现

7.邮箱(email)

会自动验证Email地址格式是否正确。

邮箱输入


8.网址(url)

会自动验证Url地址格式是否正确。

网址的用法


9.数字(number)

min:最小数字。max:最大数字。step:数字间隔。

数字的用法

10.滑块(range)

min:滑动的最小数字。max:滑动的最大数字。step:一次能滑多少数字。

滑块的用法

11.搜索框(search)

搜索功能的输入框。

搜索框

三、表单的高级应用

1.表单的隐藏域(hidden)

定义:隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。

作用:当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。    

隐藏域的用法

2.只读(readonly)和禁用(disabled)

只读:要求某些数据可见但不能进行修改。

禁用:当使用者满足某个条件后才能使用,如只有同意注册协议后用户才能点击注册按钮。

只读和禁用的用法

3.表单元素的标注(label)

label标签的for属性对应的id与表单元素id一致,而id属性是给label标签和表单元素进行关联使用的。

label的用法

四、表单的初级验证

1.文本输入框内容提示(placeholder)

描述文本框引导用户该输入什么内容。

placeholder的用法

2.必填项(required)

规定文本框填写内容不能为空,否则不允许用户提交表单。    

required的用法

3.正则表达式(pattern)

用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单。

输入手机号的正则表达式
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,850评论 0 0
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,317评论 3 17
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,212评论 0 0
  • 一、表单基础知识 在 JavaScript 中,表单对应的是 HTMLFormElement 类型。 HTMLFo...
    LemonnYan阅读 1,000评论 0 3
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,649评论 1 11

友情链接更多精彩内容