【慕课网】前端零基础入门---步骤一：页面结构层HTML---03-HTML表单
2024-04-24 15:29:46
03-HTML表单
第1章 表单基础结构
1-1 表单介绍
- 表单应用场景
2.表单工作原理
3.表单
- <input>标签
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form>名:<input type="text" name="ming"/><br/>姓:<input type="text" name="xing"/></form>
</body>
</html>
1-2 搭建表单页面结构
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form><table><tr><td>用户:</td><td><input type="text" name="user"/></td></tr><tr><td>密码:</td><td><input type="password" name="paw"/></td></tr></table></form>
</body>
</html>
第2章 表单元素
2-1 input标签
1. 文本域和文件域
- 单行文本域
密码框
- 文件域
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><h1 align="center">注册信息</h3><hr color="#336699"/><form><table bgcolor="#f2f2f2" width="600px" align="center"><tr><td>用户名:</td><td><input type="text" name="user" size="25" maxlength="6" placeholder="请输入用户名"/></td></tr><tr><td>密码:</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入确认密码"/></td></tr><tr><td>上传图片:</td><td><input type="file" name="file"/></td></tr></table></form>
</body>
</html>
2. 单选框和复选框
- 单选框
- 复选框
任务一
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form>性别:男<input type="radio" name="a" value="1" /> 女<input type="radio" name="a" value="2" /><br/>我喜欢的水果:<br/><input type="checkbox" name="b" value="1" />苹果<br/><input type="checkbox" name="b" value="2" />梨子<br/><input type="checkbox" name="b" value="3" />桃子</form>
</body>
</html>
任务二：根据已有代码补充代码完成该效果
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><h1 align="center">注册信息</h3><hr color="#336699"/><form><table bgcolor="#f2f2f2" width="600px" align="center"><tr><td>用户名:</td><td><input type="text" name="user" size="25" maxlength="6" placeholder="请输入用户名"/></td></tr><tr><td>密码:</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入确认密码"/></td></tr><tr><td>上传图片:</td><td><input type="file" name="file"/></td></tr><tr><td>性别:</td><td><input type="radio" name="a" value="1">男<input type="radio" name="a" value="2" checked>女</td></tr><tr><td>爱好:</td><td><input type="checkbox" name="b" value="1" checked>篮球<input type="checkbox" name="b" value="2">足球<input type="checkbox" name="b" value="3">排球</td></tr></table></form>
</body>
</html>
3. 按钮
分别是普通按钮，提交按钮和重置按钮
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form><input type="button" name="button" value="快来点我吧"/></form>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><h1 align="center">注册信息</h3><hr color="#336699"/><form><table bgcolor="#f2f2f2" width="600px" align="center"><tr><td>用户名:</td><td><input type="text" name="user" size="25" maxlength="6" placeholder="请输入用户名"/></td></tr><tr><td>密码:</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入确认密码"/></td></tr><tr><td>上传图片:</td><td><input type="file" name="file"/></td></tr><tr><td>性别:</td><td><input type="radio" name="a" value="1">男<input type="radio" name="a" value="2" checked>女</td></tr><tr><td>爱好:</td><td><input type="checkbox" name="b" value="1" checked>篮球<input type="checkbox" name="b" value="2">足球<input type="checkbox" name="b" value="3">排球</td></tr><tr><td><input type="button" name="button" value="点我"><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="重置"></td><td></td></tr></table></form>
</body>
</html>
4.图像域和隐藏域
图像域（图像提交按钮）
隐藏域
2-2 select标签
1. 下拉菜单和列表
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form>下拉菜单:<br/><select name="cd"><option value="xm">熊猫</option><option value="m">猫</option><option value="g">狗</option><option value="z">猪</option><option value="hz">猴子</option></select><br/>列表<br/><select multiple size="3" name="lb"><option value="pg">苹果</option><option value="xj">香蕉</option><option value="cz">橙子</option><option value="t">桃</option><option value="l">梨</option></select></form>
</body>
</html>
2. 分组下拉菜单和列表
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form><select name="a"><option>请选择:</option><optgroup label="水果"><option value="pg">苹果</option><option value="mht">猕猴桃</option><option value="xz">杏子</option></optgroup><optgroup label="蔬菜"><option value="xhs">西红柿</option><option value="bc">白菜</option><option value="ymc">油麦菜</option></optgroup></select></form>
</body>
</html>
2-3 textarea(多行文本域)
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><form>请做自我介绍:<br/><textarea name="js" placeholder="请在此处介绍自己..." rows="3" cols="20"></textarea></form>
</body>
</html>
第3章 表单页面调整
3-1 表单页面调整
将左侧文字以冒号对齐，按钮居中
<!DOCTYPE html>
<html>
<head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body><h1 align="center">注册信息</h3><hr color="#336699"/><form><table bgcolor="#f2f2f2" width="600px" align="center"><tr><td align="right">用户名:</td><td><input type="text" name="user" size="25" maxlength="6" placeholder="请输入用户名"/></td></tr><tr><td align="right">密码:</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td></tr><tr><td align="right">确认密码:</td><td><input type="password" name="password" size="25" maxlength="6" placeholder="请输入确认密码"/></td></tr><tr><td align="right">上传图片:</td><td><input type="file" name="file"/></td></tr><tr><td align="right">性别:</td><td><input type="radio" name="a" value="1">男<input type="radio" name="a" value="2" checked>女</td></tr><tr><td align="right">爱好:</td><td><input type="checkbox" name="b" value="1" checked>篮球<input type="checkbox" name="b" value="2">足球<input type="checkbox" name="b" value="3">排球</td></tr><tr><td colspan="2" align="center"><input type="button" name="button" value="点我"><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="重置"></td></tr></table></form>
</body>
</html>
3-2 表单属性
【慕课网】前端零基础入门---步骤一：页面结构层HTML---03-HTML表单相关推荐
- 【慕课网】前端零基础入门---步骤二：页面化妆师CSS---02-CSS文本样式
02-CSS文本样式 第1章 字体样式 1-1 字体属性(font-family) 因此,标题可以使用Serif字体集,大段文字可以使用Sans Serif. 注意:使用常用的字体,而不要将自己安装的 ...
- 慕课网python零基础入门教程_Python 3零基础完全入门与提高视频课程
<Python3面向对象编程>第一版中文译者之一,新浪知名Python博主"麦兜搞IT"带大家一起学Python3 大家好,欢迎大家学习Python3零基础完全入门课程 ...
- 慕课网python零基础入门教程_零基础Python爬虫入门学习一之综述
原标题:零基础Python爬虫入门学习一之综述 大家好哈,最近博主在学习Python,学习期间也遇到一些问题,获得了一些经验,在此将自己的学习系统地整理下来,如果大家有兴趣学习爬虫的话,可以将这些文章 ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- 前端零基础入门（八）：background的妙用_css精灵
在前面我们已经了解到了网页当中背景的基本用法了,包括: 背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式. 今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图 ...
- web前端零基础入门（一）
web前端零基础入门 01. 网页简介 02. 网页简史 03. HTML简介 04. 编写第一个网页 06. 安装notepad++ 07. 自结束标签和注释 07. 标签中的属性 08. 文档声明 ...
- Datawhale 零基础入门数据挖掘心跳信号分类学习反馈03
Detail 零基础入门数据挖掘 (心跳信号分类) 学习反馈TASK3 使用语言:python Tas1 – Task5 Task3_数据特征工程分析 主要是针对时间序列的心电图数据加上:特征time ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 前端零基础入门_000_前言
适合人群 本课程适合下面人群: 1)在校学生,想学习前端开发.将来从事前端开发工作.教程详细系统的讲解了前端基础,还讲解了相关的原理. 2)在职人士,想转行前端.教程提供了大量的案例实践,方便快速上手 ...
最新文章
- 深入理解最大池化为什么能够实现不变性？
- python硬盘api-使用python获取电脑的磁盘信息方法
- C++Primer学习之二#define,const,constexpr
- Python框架篇之Django（Models数据表的创建、数据库配置）
- asp access服装商城计算机设计网站作品
- 《结对-航空购票系统-开发环境搭建过程》
- 利润表模板excel_年薪60w财务总监：工作八年，这10个Excel必备财务系统，效率翻倍...
- 数据挖掘常用算法整理
- 关于 Macbook 外接显示器模糊问题
- idea中java程序打jar包的两种方式（超详细）
- 计算机怎样改成游戏机,手把手教你安装batocera系统，把旧电脑变成万能影音游戏主机...
- cad在哪里设置图幅大小_CAD的图纸大小的设置
- postman+newman+jenkins持续集成
- Java实现 蓝桥杯 算法提高 Monday-Saturday质因子
- 嵌入式设备的知识产权保护
- 斐讯N1刷无线打印服务器,N1刷op固件的小白步骤 - 斐讯无线路由器以及其它斐迅网络设备 - 恩山无线论坛 - Powered by Discuz!...
- 手机怎么解决同ip多账号_抖音播放量低怎么办？如何提高抖音播放量上热门？...
- flutter dart 获取当前时间戳
- 计算机网络宽带接入,【计算机网络】宽带接入技术
- 学习报告2020-9-30
热门文章
- php eot 变量,在EOT内插入带有PHP变量的python代码
- 提问（小白问题）：为什么这里调试的时候无法输入
- VxVM Volume Snapshot Issue -- 卷快照删除失败示例一
- 红帽linux系统内核版本7,如何查看Linux发行版内核版本及系统版本？
- python3 云词（wordcloud）安装失败解决方案
- 侯捷C++八部曲笔记（二、STL标准库和泛型编程）
- R语言ggplot2可视化多项式曲线、多项式方程以及多项式模型评估指标R方：使用ploynom包拟合三阶多项式模型
- Adding a Timepicker to jQuery UI Datepicker
- windows无法更改密码解决办法
- 强劲大小核结构 三星将推八核处理器