HTML----表单标签
2021-04-18 11:26
标签：tle 表单 mamicode 学习 用户数 url html 提示 class * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * 使用的标签：form标签 * 属性： * action：指定数据提交的URL * method：指定提交方式 效果： HTML----表单标签 标签：tle 表单 mamicode 学习 用户数 url html 提示 class 原文地址：https://www.cnblogs.com/21seu-ftj/p/12283956.html## HTML标签：表单标签
* 分类：一共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>Titletitle>
head>
body>
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>
