html基础-form表单、input输⼊框、select选择框与⽂本框（⼆）
HTML标签：表单标签
概念：⽤于采集⽤户输⼊的数据的。⽤于和服务器进⾏交互
表单标签 form：
⽤于定义表单的。可以定义⼀个范围，范围代表采集⽤户数据的范围
form表单属性：
1）action：指定提交数据的URL
2）method：指定提交⽅式，分类：⼀共7种，2种⽐较常⽤
get：1.请求参数会在地址栏中显⽰。会封装到请求⾏中(HTTP协议后讲解)。
2.请求参数⼤⼩是有限制的。
3.不太安全。
post：1.请求参数不会再地址栏中显⽰。会封装在请求体中(HTTP协议后讲解)
2.请求参数的⼤⼩没有限制。
3.较为安全。
3）表单项中的数据要想被提交：必须指定其name属性
例⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="post">
⽤户名：<input  name="username"><br>
密码：<input name="password"><br>
<!--登陆按钮-->
<input type="submit" value="登录" >
</form>
</body>
</html>
结果：
input标签：可以通过type属性值，改变元素展⽰的样式
label：指定输⼊项的⽂字描述信息， label的for属性⼀般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输⼊框获取焦点。语法格式：<label for="username"> ⽤户名 </label>：<input type="text" name="username" placeholder="请输⼊⽤户名" id="username">
type属性：1）text：⽂本输⼊框，默认值；placeholder：指定输⼊框的提⽰信息，当输⼊框的内容发⽣变化，会⾃动清空提⽰信息
2）password：密码输⼊框 (密⽂显⽰)
3）radio：单选框 checked默认选中
*要想让多个单选框实现单选的效果，则多个单选框的name属性值必须⼀样。
*⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值
*checked属性，可以指定默认值
4）checkbox：复选框
*⼀般会给每⼀个单选框提供value属性，指定其被选中后提交的值
*checked属性，可以指定默认值
5) file：⽂件选择框
6) hidden：隐藏域，⽤于提交⼀些信息。
7）按钮：
submit：提交按钮。可以提交表单
button：普通按钮
image：图⽚提交按钮，src属性指定图⽚的路径
例⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="get">
<label for="username"> ⽤户名 </label>：<input type="text" name="username" placeholder="请输⼊⽤户名" id="username"><br>
<!-- type=password密码加密， placeholder 为表单的默认的⽂案-->
密码：<input type="password" name="password" placeholder="请输⼊密码"><br> <!--radio单选框，要想实现单选 name值必须⼀致；value指定之后get带参-->
性别：<input type="radio" name="gender" value="male" >  男
<input type="radio" name="gender" value="female" checked>  ⼥
<br>
<!--    checkbox复选框，checked默认被选中-->
爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java"  checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图⽚:  <input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"> <br>
取⾊器：<input type="color" name="color"><br>
<!-- 展⽰⼀个⽇期年⽉⽇ 2020-01-02-->
⽣⽇：<input type="date" name="birthday"> <br>
<!-- 展⽰⼀个⽇期年⽉⽇时分秒 -->
html中提交表单用什么属性
⽣⽇：<input type="datetime-local" name="birthday"> <br>
<!-- 校验邮箱是否有@-->
邮箱：<input type="email" name="email"> <br>
<!-- 只能输⼊数字-->
年龄：<input type="number" name="age"> <br>
<!--button后⾯可以与javascript⼀起使⽤实现动态的效果-->
<input type="submit" value="登录" >
<input type="button" value="⼀个按钮" ><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>
结果：
select: 下拉列表
⼦元素：option，指定列表项
textarea：⽂本域
cols：指定列数，每⼀⾏有多少个字符; rows：默认多少⾏。
例⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="/login" method="get">
省份：<select name="province">
<!-- 请选择不被提交  selected表⽰默认选中的-->
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">陕西</option>
</select><br>
<!--⽂本域 cols列 rows⾏数-->
⾃我描述：
<textarea cols="20" rows="5" name="des"></textarea><br>
</form>
</body>
</html>
结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。