文章目录

1. 表单分类
2. 基础表单
3. 表单元素
4. 表单应用
5. 案例练习

1. 表单分类

登录
搜索框

2. 基础表单

form 表单
action：提交地址
method：提交的方式（post）
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记
get：携带参数，参数可以在url中看到，不安全，大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post：参数不可见、安全，大小没有限制 （表单提交常用方式post）
输入框均要写在表单内
input 标签
name：必须写上
type：
text ：文本框
password：密码框
submit：提交按钮
reset：重置
案例代码
运行结果

3. 表单元素

所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值。

（1）文本框

type=“text”
value ：文本框默认的初始值
size：文本框的长度
maxlength：文本框的最大输入长度

（2）密码框

type=“password”
size：密码框的长度

（3）单选按钮

type=“radio”
value：表单提交的值
name：名字相同，则自动分组，必须要分组
checked：默认选中
disabled：禁用
注意事项：默认没有值，需要在input type=“radio” 后增加单选框的属性

（4）多选框

type=“checkbox”
name：必填项，如果是分组，则名称一致
value：表单提交的值
checked：默认选中
disabled：禁用
注意事项：默认没有值，需要再input type=“checkbox” 后增加多选框的属性

（5）下拉列表框

select
name：组件名字必填
size: 显示的数量，默认为1
- option：选项
  value 必填
  option标签中间写下拉框的值
  selected：默认选中

（6）按钮

value：按钮上的文字

（7）文本域

（8）文件域

表单，需要支持提交复杂文件
当使用文件域file时，必须在form的标签中说明编码方式“enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。

（9）邮箱

（10）网址

（11）数字

商品数量，计数 type=“number”
最小值 min
最大值 max
步长 step

（12）滑块

（13）搜索框

总运行页面

4. 表单应用

（1）隐藏域

（2）只读和禁用

（3）标注

通过 for=“name” 来链接到表单中的指定ID
运行页面

（4）初级表单验证

进行初级表单验证的原因
默认提示
– placeholder=“必须是url格式” 默认提示，告诉用户应该这么做
必填
–required必须要填写这个字段
正则表达式
运行页面

5. 案例练习

人人网的原注册页面
案例代码
测试结果

不足：
（1）生日只能一个个数字手动填写
（2）验证的图片不会添加

前端(三)——HTML之表单相关推荐

Html前端基础（form表单、img标签、a href标签、id的作用）
文章目录一.img标签二.a标签(带href) 三.form表单本篇主要分析Html前端开发中的img图片标签.a href超链接标签.form表单标签,其中form是重点一.img标签 1. ...
前端页面与form表单提交：代码分享
今天分享下"前端页面与form表单提交:代码分享"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件--用于自定义表单的前端组件form-create 背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各 ...
前端学习笔记--AJAX的应用（三）form表单改为AJAX提交
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 参考博客:http://ww ...
HTML（三）：表单元素
表单元素概述表单(Form),用于收集用户信息.提交用户请求等处理过程 1.设计表单,并放入一些输入域 2.网站访问者在自己的计算机上填写上述输入域,并提交到服务器 ...
django一个html先后两个form,Django教程（三）- Django表单Form
目录: 1.Form 基本使用 django中的Form组件有以下几个功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 2.Form中 ...
web程序设计（前端）实验二——表单设计
实现以下注册网站的设计. 设计要求: (1)整个页面采用div布局,宽度500px,并且网页居中,以上控件放在一个表单内,每个控件必须设置name属性:采用label标签,使得点击左边字体时,右边控件 ...

前端(三)——HTML之表单

文章目录

1. 表单分类

2. 基础表单

3. 表单元素

4. 表单应用

5. 案例练习

前端(三)——HTML之表单相关推荐

最新文章

热门文章