webIDE表单标签以及包含选择器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 奥卡姆剃刀原则:如非必要 勿增实体 -->
<body>
<!-- action属性 表示填写信息提交的服务器处理函数 -->
<!-- get 会将信息明文的形式拼接在url后面 -->
<!-- post 会将的信息保存在request包中,通过浏览器提交 -->
<!-- get和post的区别 -->
<!-- 1.安全性上的不同 get会拼在url上所以 安全性不高 post实在request包体中-->
<!-- 2.参数位置上的不同 get在url中写参数 post在request -->
<!-- 3.参数长度的不同 get会因为浏览器的限制而有可能不能完整的传递参数 post无此顾虑-->
<!-- 4.缓存方式不同 get会保存在浏览器的历史记录中 post不会-->
<!-- enctype urlencoded会使用url编码方式将表单信息进行编码-->
<!-- form-data一般用来上传文件时使用 它使用二进制的数·据流传递信息 -->
<!-- text/plain 使用明文-->
<form action="#" method="get" enctype="text/plain">
<!-- input标签 使用交信息的标签 可在各种类型的input标签传递各种类型数据 -->
<!-- type属性决定了标签的形式 -->
<!-- name属性决定了提交表单信息时键值对键的名字 如果没有name input标签将成为摆设 不具备数据提交的能力-->
<!-- size可以用来设置 标签的宽度 -->
<!-- maxlenth可以设置字符的数量 -->
<!-- checked 可以让单选/复选默认选中 -->
<!-- readonly 只读属性 用户无法修改 -->
<!-- disable 失效 用户无法修改的同时 标签也是失效了 不再进行上传 -->
<!-- placehoder属性 可以用来预制一些提示信息 -->
<!-- autofocus属性 可以自动聚焦到某个标签-->
用户名:<input type="text" name="username" maxlength="6" placeholder="请输入你的用户名"> <br>
<!-- password用于输入密码 -->
密 码:<input type="password" name="password" value="11111"/><br>
<!-- checkbox多选框 -->
爱 好:<input type="checkbox" name="fav" value="bk" checked>篮球
<input type="checkbox" name="fav" value="sing" checked>唱
<input type="checkbox" name="fav" value="jump" checked>跳
<input type="checkbox" name="fav" value="rap" checked>Rap <br>
<!-- radio是单选框 使用name属性将多个radio进行关联 -->
性 别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="跨性别" checked>跨性别 <br>
<!-- email是一个输入框 会进行内容的检测 只有你输入内容符合邮箱的格式 提交时才不会报错 -->
邮 箱:<input type="email" name="email" autofocus/>
<!-- submit 提交按钮 点击时会将表单中所有的信息提交到action指定的服务数据处理接口 -->
<input type="submit">
<!-- button同submit -->
<button>上传</button>
<!-- file 类型 用于上传文件-->
<input type="file" name="avarta">
<div style="width: 100px;height: 100px;"></div>
<!-- reset类型 是重置按钮 一旦点击 之前录入用户信息全部清空 -->
<input type="reset" >
<!-- image类型是图片按钮 可以设置开发者想要的或者更优化按钮效果 本质上还是提交按钮 -->
<input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px">
<!-- hidden隐藏域 一些无需用户键入信息可以自动获取的信息,可以使用hidden类型来上传-->
<input type="hidden" name="location" value="西安">
<!-- h5推出的新标签 -->
<!-- 颜色选择器 -->
<input type="color">
<!-- 日期选择器 -->
<input type="date">
<!-- 时期时间选择器 -->
<input type="datetime-local">
<!-- 时间 -->
<input type="time" name="" id="">
<!-- url输入框 规则是必须在起始部分写入https://-->
<input type="url">
<!-- 范围选择 -->
<input type="range" max="100" min="20">
</form>
</body>
</html>