<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单_表单提交相关的演练</title>
<style>
/* css reset: 了解 */
/* body, ul {
margin: 0;
padding: 0;
} */
ul {
list-style: none;
}
input, textarea {
outline: none;
}
textarea {
resize: none;
}
/* 真正样式的css */
fieldset {
width: 400px;
}
input, textarea {
outline: none;
}
input:focus, textarea:focus {
border-color: #4791ff;
border-style: solid;
}
</style>
</head>
<body>
<form action="http://www.baidu.com"
method="POST"
enctype="multipart/form-data">
<fieldset>
<legend>必填信息</legend>
<!-- 1.手机输入框 -->
<div>
<label for="phone">手机：</label>
<input type="text"
maxlength="11"
placeholder="请输入您的手机号"
autofocus
name="phone"
tabindex="-1">
</div>
<!-- 2.密码输入框 -->
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</div>
<!-- 3.验证码输入框 -->
<div>
<label for="validate">验证码：</label>
<input type="text" id="validate" name="code">
<!-- 3.1.button实现方式一: button -->
<!-- <button>获取验证码</button> -->
<!-- 3.2.button实现方式二: input-->
<input type="button" value="获取验证码" disabled>
</div>
</fieldset>
<fieldset>
<legend>选填信息</legend>
<!-- 4.照片选择(文件上传) -->
<div>
<label for="photo">照片：</label>
<input type="file" id="photo" name="photo">
</div>
<!-- 5.性别选择 -->
<div>
<span>性别：</span>
<label for="male">男</label>
<input type="radio" name="sex" id="male" value="male" checked>
<label for="female">女</label>
<input type="radio" name="sex" id="female" value="female">
</div>
<!-- 6.爱好选择 -->
<div>
<span>爱好：</span>
<label for="sing">唱歌</label>
<input type="checkbox" name="hobbies" id="sing" value="sing" checked>
<label for="dance">跳舞</label>
<input type="checkbox" name="hobbies" id="dance" value="dance">
<label for="rap">rap</label>
<input type="checkbox" name="hobbies" checked id="rap" value="rap">
<label for="basketball">篮球</label>
<input type="checkbox" name="hobbies" id="basketball" value="basketball">
</div>
<!-- 7.学历 -->
<div>
<span>学历：</span>
<select name="education" id="" multiple>
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2" selected>高中</option>
<option value="3">大专</option>
</select>
</div>
<!-- 8.简介 -->
<div>
<label for="introduce">简介：</label>
<textarea name="intro" cols="20" rows="5" id="introduce"></textarea>
</div>
</fieldset>
<!-- 9.重置按钮 -->
<!--
前提：
1.前提一：type必须是reset类型(value值可以不写)
2.前提二: 所有的内容都必须在同一个表单中(form)
-->
<input type="reset">
<!-- 10.进行表单提交 -->
<input type="submit">
</form>
</body>
</html>
html_css学习经验笔记.zip
需积分: 0 47 浏览量
更新于2023-12-30
1
收藏 4.72MB ZIP 举报
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html css js 知识学习代码 源码 提供+源码 供学习参考
html_css学习经验笔记.zip （274个子文件） 
iconfont.css 5KB style.css 366B reset.css 334B test01.css 110B reset.css 98B test02.css 92B base.css 75B iconfont.eot 7KB
timg.gif 362KB
16_表单_表单提交相关的演练.html 4KB 07_background-attachment的使用.html 4KB 10_表单_相关元素综合演练-label.html 4KB 07_code-br-hr元素的演练.html 3KB 06_固定定位的练习-考拉侧栏.html 3KB 23.左边广告条.html 3KB 10_表单_相关元素综合演练.html 3KB 16_京东_布局案例-清除浮动.html 3KB 07_vertical-align的使用-理解行盒.html 3KB 21_不同屏幕设置不同font-size-js动态计算.html 3KB 08_表格_单元格合并的练习.html 2KB 05_css-sprite京东练习01 copy.html 2KB 08_伪类_目标伪类.html 2KB 19_a元素的锚点链接.html 2KB 09_flex布局的使用05.html 2KB 04_display的练习-分页列表.html 2KB 13_考拉_考拉案例01.html 2KB 10_京东_布局案例02.html 2KB 08_绝对定位的练习01-考拉商品.html 2KB 09_flex布局的使用02.html 2KB 10_flex布局的使用06.html 2KB 09_绝对定位的练习02-下拉二维码.html 2KB 24.边框搭建.html 2KB 02_盒子模型_content相关属性.html 2KB 06_表格_表格中其他元素.html 2KB 03_css层叠_基本演练.html 2KB 09_flex布局的使用03.html 2KB 14_CSS3D动画的实现.html 2KB 20_水平居中-不同类型的方式.html 2KB 09_最常见的css属性.html 2KB 09_flex布局的使用04.html 2KB 18_回顾不同单位的对比.html 2KB 10_flex布局的使用03.html 2KB 04_浮动_理解前面的规则.html 2KB 11_网络字体的使用.html 2KB 11_盒子模型_border边框的形状.html 2KB 03_盒子模型_padding相关属性.html 2KB 12_字体图标的使用.html 1KB 18_阴影_文字添加阴影.html 1KB 03_浮动_理解规则三.html 1KB 12_京东_布局案例03.html 1KB 05_脱离标准流元素的特点.html 1KB 05_css-sprite京东练习01.html 1KB 13_关键帧动画的使用.html 1KB 06_css选择器_类选择器.html 1KB 10_伪类_动态伪类.html 1KB 14_考拉_考拉案例02.html 1KB 05_表格_实现细线表格.html 1KB 10_flex布局的使用04.html 1KB 03_display的练习-邮箱列表.html 1KB 08_字符实体的演练.html 1KB 09_flex布局的使用01.html 1KB 20_a元素的伪链接.html 1KB 04_p元素的演练.html 1KB 01_元素类型的划分方式.html 1KB 10_flex布局的使用05.html 1KB 06_浮动_理解规则五.html 1KB 11_元素之间的层叠关系.html 1KB 02_浮动_理解规则二.html 1KB 10_flex布局的使用02.html 1KB 04_固定定位的演练.html 1KB 11_表单_按钮的实现方式.html 1KB 14_a元素的基本使用.html 1KB 12_img元素的属性演练.html 1KB 02_块级元素的由来.html 1KB 01_浮动_理解规则一.html 1KB 04_文本_text-indent.html 1KB 07_表格_单元格合并基本使用.html 1KB 13_伪类_nth-child-n.html 1KB 06_多媒体元素_video.html 1KB 13_行内元素的padding和border.html 1KB 10_flex布局的使用01.html 1KB 03_列表_列表的属性使用.html 1KB 15_浮动_考拉案例03.html 1KB 12_字体_font缩写属性.html 1KB 05_盒子模型_margin相关属性.html 1KB 08_生成元素的属性.html 1KB 01_文本_text-decoration.html 1KB 14_设置元素的圆角效果.html 1KB 09_表格_单元格之间的间距.html 1001B 06_margin传递_margin-top传递.html 998B 20_不同屏幕设置不同font-size-媒体查询.html 978B 08_HTML5表单元素的扩展.html 968B 11_块级元素的宽度计算.html 967B 04_background-position的使用.html 960B 04_表格_表格的基本使用.html 956B 12_表单_input和label的关系.html 940B 06_transition的过渡动画.html 939B 06_overflow属性的使用.html 922B 12_伪类_nth-child-数字.html 910B 16_文字换行的处理.html 903B共 274 条
- 1
- 2
- 3
152 浏览量
148 浏览量
2023-12-30 上传
2024-01-01 上传
177 浏览量
5星 · 资源好评率100%2024-01-05 上传
5星 · 资源好评率100%149 浏览量
131 浏览量
5星 · 资源好评率100%131 浏览量
2024-11-08 上传
157 浏览量
5星 · 资源好评率100%158 浏览量
181 浏览量
114 浏览量
164 浏览量
158 浏览量
5星 · 资源好评率100%2023-12-30 上传
161 浏览量
172 浏览量
184 浏览量
200 浏览量
资源评论
辣椒种子
- 粉丝: 4303
- 资源: 5837
最新资源
- 055基于MATLABCPLEX 的机组最优组合，成功求解表格化，图示化的机组组合结果.rar
- 060TimeSeries时间序列函数 matlab代码.rar
- 059RegressionAnalysis回归分析 matlab代码.rar
- 058利用智能算法对微网中的分布式电源进行最优调度实现配电网稳定运行 matlab代码.rar
- 061MultivariateAnalysis（目标规划、多元分析与插值的相关例子）matlab代码.rar
- 063基于Matlab和CPLEX的2变量机组组合调度程序.rar
- 062这是一个matlab神经网络的简单应用，主要用于预测光伏出力，输入为温度湿度等因素，输出为光伏出力。matlab代码.rar
- 064三目标微网调度，含经济调度，环境友好调度，优化调度 matlab代码.rar
- 063-基于MATLAB和Yalmip的2变量机组组合调度算法.rar
- 068Cholesky matlab代码.rar
- 066可以参考粒子群综合能源系统优化的matlab实现 matlab代码.rar
- 067基于多目标粒子群算法冷热电联供综合能源系统运行优化 matlab代码.rar
- 069用matlab编写的经典电力系统经济调度程序 matlab代码.rar
- 071AHP层次分析法 matlab代码.rar
- 070综合能源优化含储能 matlab代码.rar
- 074WT_PV_Load_Scenario matlab代码.rar
