标签：tle 表单 mamicode 学习 用户数 url html 提示 class
* 表单：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* 使用的标签：form标签
* 属性：
* action：指定数据提交的URL
* method：指定提交方式
* 分类：一共7种
get：
1、请求参数会在地址栏中显示。
2、请求参数长度是有限制的。
3、get请求不太安全
post:
1、请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议中详解）
2、请求参数的大小没有限制
3、post请求安全
* 表单项中的数据要想被提交：必须指定其name属性
* 表单项标签：
* input：可以通过type属性，改变元素展示样式
* type属性：
* text：文本输入框
* placeholder：指定输入框的提示信息，当时输入框的内容发生变化，他就会清空提示信息
* password：密码输入框
* radio：单选框（1、如果要想实现单选那么name属性必须唯一。2、一般会给每一个单选框提供value属性，指定其被选中后提交的值.3、checked属性可以指定默认值）
* checkbox：复选框（1、一般会给每一个 单选框提供value属性，指定其被选中后提交的值.2、checked属性可以指定默认值）
* flie：文件选择框
* hidden：隐藏域，用于提交一些隐藏信息
*按钮：
* submit：提交按钮
* button：按钮
* images：图片提交按钮
* src：指定图片路径
*label：指定输入项的文字信息
* 注意：label的for属性一般会和input的id属性对应，如果对应了，则点击label区域会让input输入框获取焦点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定数据提交的URL * method：指定提交方式 * 分类：一共7种 get： post: * 表单项中的数据要想被提交：必须指定其name属性 --> <form action="#"> <label for="username">用户名：</label><input id="username" name="username" placeholder="请输入密码"><br> 密码：<input name="password" placeholder="请输入密码"><br> 性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 爱好：<input type="checkbox" name="hobby" value="gj"> 逛街 <input type="checkbox" name="hobby" value="yy"> 游泳 <input type="checkbox" name="hobby" value="xx"> 学习<br> 图片：<input type="file"><br> 隐藏域：<input type="hidden" name="id" value="aaa"> <input type="submit" value="登录"><br> <input type="image" src="../练习/images/icon_1.jpg"><br> 拾色器：<input type="color" name="color"><br> 日期：<input type="datetime-local" name="date1"><br> 日期：<input type="date" name="date2"><br> 邮箱：<input type="email" name="email"><br> 年龄：<input type="number" name="age"><br> </form> </body> </html>
* select：下拉列表
* 子元素：option，指定列表项
* textarea：文本域
* cols：指定列数，每一行有多少个字符。
* rows：默认多少行。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页</title> </head> <body> <form action="#" method="post"> <table border="1" align="center" width="500"> <tr> <td><label for="username">用户名：</label></td> <td><input type="text" id="username" placeholder="请输入账号"></td> </tr> <tr> <td><label for="password">密码：</label></td> <td><input type="password" id="password" placeholder="请输入密码"></td> </tr> <tr> <td><label for="email">Email：</label></td> <td><input type="email" id="email" placeholder="请输入Email"></td> </tr> <tr> <td><label for="realname">姓名：</label></td> <td><input type="text" id="realname" placeholder="请输入真实姓名"></td> </tr> <tr> <td><label for="tel">手机号：</label></td> <td><input type="text" id="tel" placeholder="请输入您的手机号"></td> </tr> <tr> <td><label>性别：</label></td> <td><input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="2">女 </td> </tr> <tr> <td><label>出生日期：</label></td> <td><input type="date" name="date"></td> </tr> <tr> <td><label>验证码：</label></td> <td><input type="text" name="yzm"><img src="images/logo.jpg"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册"></td> </tr> </table> </form> </body> </html>
效果：
标签：tle 表单 mamicode 学习 用户数 url html 提示 class
原文地址：https://www.cnblogs.com/21seu-ftj/p/12283956.html
