学习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浏览
略