【慕课网】前端零基础入门---步骤一：页面结构层HTML---03-HTML表单

最新推荐文章于 2020-06-18 11:37:14 发布
最新推荐文章于 2020-06-18 11:37:14 发布
阅读量190 收藏 1
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405634/article/details/103835013
版权

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" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女<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 表单属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

dqh_zsh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
访慕课网实战页面精致前端代码
05-30
访慕课网前端实战界面，相似度95%以上，还增添了动态图片效果，献给所有初学者，值得下载。创作不易，请支持。
前端：慕课网 课程界面编写
03-03
前端：慕课网 课程界面编写 前端初级测试编写 慕课网 课程界面
Html 慕课园编程练习10-1
a130866805的博客
08-15 217
23:10:252019-08-14 自己写的这个好丑。。。。 题目：利用之前我们学过的JavaScript知识，实现选项卡切换的效果。 效果图: (另外 这个动图是怎么插入的 用url就行 复制就不行) 我写的效果图： (一对比就好丑) 代码 1 <!DOCTYPE html> 2 <html> 3 <he...
编程练习
chuisiqin5881的博客
05-06 176
<!DOCTYPEHTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>流程控制...
入门HTML之2.19
y-can-choose-kiss-me
12-03 607
有序列表元素—2 元素也有自己的type属性， type属性的属性值有1、A、a、I、i等。 例如，我们以A、B、C……作为列表的编号 有序列表类型 ONE-ONE ONE-TOW ONE-ONE ONE-TOW ONE-ONE ONE-TOW ONE-ONE ONE-TOW ONE-ONE ONE-T
google-forms-html-exporter：建立标准HTML 使用任何Google表单
02-03
将任何Google表单转换为HTML表单 实时@ 开发者专区 该项目分为两个部分： 后端 前端 建立后端 你需要和 运行gb vendor restore来安装所有依赖项，然后gb build来构建后端（输出到./bin文件夹）。 建立前端 您将...
Desain-Login-HTML:Desain表单登录Dengan HTML和纯CSS terbaru
03-30
在本项目"Desain-Login-HTML: Desain表单登录Dengan HTML和纯CSS terbaru"中，我们将深入探讨如何使用HTML和CSS构建一个现代、功能完备的登录页面。这个项目强调了最新技术和最佳实践，确保设计既美观又实用。 首先...
HTML-And-JavaScript-Website:为JeeRank保存所有HTML和JavaScript代码
04-11
总的来说，这个项目是一个全面的前端开发实例，涵盖了从基础的 HTML 结构到复杂的 JavaScript 功能，以及美观的 CSS 设计。对于想要学习或了解 web 开发的人来说，这是一个很好的实践资源，可以通过分析和修改代码来...
Material-para-estudo-front-end:机电材料Para estudo前端组件
03-10
【标题】"Material-para-estudo-front-end: 机电材料Para estudo前端组件" 提供了一套完整的前端学习资源，特别关注于构建用户界面所需的各类技术。这个资源包涵盖了前端开发的基础和进阶知识，适合想要提升或系统...
coming-soon-landing-pages:即将登陆页面
05-15
这种页面通常包含一个倒计时器、公司或项目的简介、联系信息以及订阅表单，以便对即将到来的网站感兴趣的人可以提前了解并保持联系。在本文中，我们将深入探讨构建此类页面所需的关键技术和设计元素，主要围绕CSS、...
编程速度培养-快捷键练习2 只用键盘操作
weixin_30645617的博客
09-23 163
背熟以下文章，就能脱离鼠标，光用键盘操作了 一、常见用法： 字串7 F1　　　　　　　　　　　显示当前程序或者windows的帮助内容。 F2　　　　　　　　　　　当你选中一个文件的话，这意味着“重命名” F3　　　　　　　　　　　当你在桌面上的时候是打开“查找：所有文件” 对话框 F10或ALT　　　　　　　　激活当前程序的菜单栏 windows键或CTR...
编程练习(14)
ling的博客
12-03 212
[1].在控制台中实现倒计时效果。package test1;import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.TimerTask;public class MyTimer extends TimerTask{ @Override
3-11
07-31 76
链接:http://url7.me/n2fR ...
使用SpringCloud框架实现慕课网主页后端开发
三毛村滴雪鱼粉的博客
06-18 3553
涉及的技术 SpringCloud是一套分布式服务治理的框架，本身就不会提供具体功能性的操作，更专注于服务之间的通讯、熔断、监控等等。因此就需要很多组件去支撑这样的一套功能。企业中最高频使用的组件有：Eureka，Zuul，Feign,Hystrix Eureka 企业级开发中最高频使用的组件，SpringCloud框架中的基础组件，通常SpringCloud项目都会用到。提供了服务注册和服务发现的功能。由于SpringCloud是微服务框架，整个系统中会存在多个功能点较少的微服务，Eureka的注册和发
9-19练习
weixin_30734435的博客
09-19 101
三角形周长 1 public class sjx 2 { 3 double a; 4 double b; 5 double c; 6 public double zc(double a1,double b1,double c1) 7 { 8 a=a1; 9 b=b1; 10 ...
前端HTML基础的一个小练习
weixin_45525005的博客
09-26 417
学完了HTML基础，做一个小练习，记录下来，只单纯的做了页面，没有加入提交等功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> </head> <body> <...
【慕课网】前端零基础入门---步骤一：页面结构层HTML---02-HTML表格
qq_43405634的博客
01-04 265
02-HTML表格 第1章 基础表格 基本语法 <!DOCTYPE html> <html> <head> <title>3</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <bod...
编程练习3 1015
q1973213867的博客
05-31 200
1、题目编号：1015 2、简单题意：输入十进制，输出二进制。 3、解题思路及形成过程： 4、感悟： 5、代码： #include using namespace std; int main() {     int N,d,s,i,C;     while(cin>>N)     {         C=0
Control-M 作业配置手册
04-30
Control-M作业配置手册是一份详尽的指南，主要介绍了Control-M (Control-M/EM和Control-M/Server)平台中作业的管理和执行细节。对于初次接触该系统的新用户，以及有经验的开发者而言，这份文档是宝贵的参考资源。 1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值