学习2-表单
表单1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素（上）</title>
</head>
<body>
<form><!-- 用于为用户输入创建html表单 -->
<!-- 单行文本框 --><!--input type属性值默认为text，设不设text都一样 -->
<!-- input是用于收集用户输入信息的表单 -->
<!-- input的type属性很重要，type值决定了input的类型 -->
<!-- text值是单纯的文本，没有限制 -->
<input type="text">
<!-- password值-限制输入内容且将内容浏览加密，
在文本框不可见，但在上传数据的时候还是以原数据上传，
非加密数据，仅仅是掩盖掉在界面的显示 -->
<input type="password"/>
<!-- value的值是文本输入框的初始值 -->
<input value="文本值"/>
<!-- placeholder为提示，而非文本值 -->
<input placeholder="提示信息"/>
<!-- maxlength限制输入字符长度 -->
<input maxlength="5" placeholder="只能输入五个字符"/><br/>
<!-- 文本框的长度为25个字符长度 -->
<input placeholder="尺寸" size="25"/>
<!-- 只读属性 -->
<input value="readonly" readonly/>
<!-- 文本域 -->
<!-- 一般可以在浏览界面拖动右下角图表控制
文本域框大小，据我测试谷歌浏览器可以由这个效果，
QQ浏览器和IE浏览器没有这个效果 -->
<!-- rows高度，cols宽度 -->
<textarea value="这是个文本域" rows="100" cols="0"></textarea>
</form>
</body>
</html>
表单1浏览
表单2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素（中）</title>
</head>
<body>
<!-- form表单元素是用来获取用户输入数据所需的 -->
<form>
<!-- inpur"button"的值并不是写在value属性里，而是包含在标签中 -->
<!-- <button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权 -->
<!-- 且input禁止关闭标签，因为button的值不是写在value里而是咋标签里-起始、关闭标签之间 -->
<input type="button" value="按钮"/>
<!-- 跟js合作并且作为绑定事件的 -->
<button>按钮</button>
<!-- 获取用户输入的值 -->
<!-- 设置submit属性必须form里有method属性和action属性 -->
<input type="submit" value="提交"/>
<!-- range数字滑动条，值：0-100； -->
<!-- 在ie浏览器上可以显示数值,谷歌浏览器不行 -->
<!-- min，max设置数值范围 -->
<!-- step属性设置间隔值step=“50” -->
<!-- value属性设置起始位置 -->
<input type="range" min="-100" max="500" step="50" value="-100"/>
<input type="range" min="-100" max="500" step="50" value="0"/>
<!-- number属性只能输入数字，在谷歌浏览器可以显示数值增减导航按钮，IE不行 -->
<!-- 同样，min，max设置输入值范围 -->
<!-- value设置初始值 -->
<input type="number" min="-100" max="100" value="-50"/>
<!-- checkbox复选框也就是多选，复选框可以点击选中并再次点击取消选中状态，而radio不行-->
<input type="checkbox"/>可取消选择<br />
<!-- 多个radio组成一个选项组，下面这个选项组可以选中三个 -->
<input type="radio" />不可取消选择
<input type="radio" />不可取消选择
<input type="radio" />不可取消选择
<!-- 而下面这个选项组就只能选中一个，归功于name的值相等所有，他们之中name相等就只能选其中一项 -->
<!-- checked属性则是初始化默认选中选项 -->
<input type="radio" name="a" checked="checked"/>初始选项
<input type="radio" name="a"/>限制选项a
<input type="radio" name="a"/>限制选项b
<!-- select 元素用于创建单选或多选菜单 -->
<select>
<option>选项a</option>
<option>选项b</option>
<option>选项c</option>
</select>
<!-- details和select用法一样，但是details可以输入内容自动查找选项 -->
<!-- 且details一般都是配合input使用，而且要设置input的属性list=details的id值 -->
<input type="text" list="datalist1" />
<details id="datalist1">
<option>1</option>
<option>2</option>
<option>3</option>
</details>
</form>
</body>
</html>
表单2浏览
略
表单3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input的各种type</title>
</head>
<body>
<!-- method是传值方式，action是要跳转的页面，两者是共存的 -->
<form method="get" action="action跳转.html" enctype="multipart/form-data">
<input placeholder="type默认为text"/>
<input type="number" placeholder="请输入账号"/><!-- 数字 -->
<input type="password" placeholder="请输入密码"/><!-- 密文 -->
<input type="email" placeholder="请输入邮箱" value="1753552134@qq.com"/><!-- 邮址 -->
<input type="color" width="20px" height="40px"/><!-- 颜色板 -->
<input type="date" /><!-- 本地日期 -->
<input type="datetime"/><!-- 此属性以移除,推荐使用datetime-local -->
<input type="datetime-local"/><!-- 日期及本地时间 -->
<input type="hidden"/><!-- hidden是隐藏的意思隐藏只是在网页页面上不显示输入框，
但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。 -->
<input type="image" src=""/><!-- 不用看这是图片按钮 -->
<input type="month"/><!-- month选取年月值 -->
<input type="radio"/><!-- 单选按钮 -->
<input type="checkbox"/><!-- 复选按钮 -->
<input type="range"/><!-- 滑动条 -->
<input type="reset"/><!-- 重置from表单内的所有值 -->
<input type="search" placeholder="输入查找内容"/><!-- 跟text的区别就是有个清楚按钮 -->
<input type="submit"/><!-- 获取用户输入的内容并执行跳转-按照form的属性值method和action跳转，
form里必须要有method和action属性 -->
<input type="time"/><!-- 时间-时、分 -->
<input type="tel" value="tel"/>
<input type="url"/><!-- 仅能输入网址 -->
<input type="week"/><!-- 年-周 -->
<input type="file" multiple="multiple"/>
<!-- file用来上传文件，其中multiple是多文件，
required是单文件，使用input-file上传文件时需设置
form的属性 enctype="multipart/form-data" -->
<!--
●开发中遇到一个这样的需求，
●要求input输入框在手机端出现数字键盘的同时显示圆点，试过各种方法都不太理想，
●最终经过查阅大量资料后，终于实现了需求。
●我们一般的密码输入框是这样的：-->
<input type="password" placeholder="请输入密码">
<!--
●这个实现了输入密码显示圆点的需求，但是手机上他调出来的是字母键盘，
●所以不符合开发需求。所以最终的密码输入框是这样的：-->
<input type="tel" maxlength="6" style="-webkit-text-security:circle" placeholder="请输入密码">
<!-- 释： -webkit-text-security用法， -->
<!-- 指定用于在密码输入字段中代替字母的形状。 -->
<!--语法：-webkit-text-security: circle | disc | none | square;
circle：圆形；disc：圆盘形状（句号）
none：没有使用形状；square：方形的； -->
</form>
</body>
</html>
表单1浏览
略
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
