<!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 （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
资源评论
