文章目录
HTML标签：表单标签
- 表单：用于采集用户输入数据的，和服务器进行交互
- 使用的标签form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：action:用于指定提交数据的url
method：指定提交方式
分类：一共7中，2中比较常用
get：1请求参数会在地址栏中显示,会封装在请求行中2请求参数长度是由限制的3，不太安全
post：1请求参数不会再地址栏中显示，会封装在请求体中，2请求参数大小没有限制3，更安全
表单项中的数据想要被提交，必须指定其name属性
-->
<form action ="#" method ="post">
用户名:<input name ="username"><br>
密码:<input name ="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
- get：1. 请求参数会在地址栏中显示,会封装在请求行中2请求参数长度是由限制的3，不太安全
- post：1请求参数不会再地址栏中显示，会封装在请求体中，2请求参数大小没有限制3，更安全
表单项中的数据想要被提交，必须指定其name属性
表单项标签
-
input:可以通过type属性值，改变元素的样式
- type属性
- text：文本输入框，默认值
- placeholder:指定输入框的提示信息，当输入框内容发生变化，会自动清空提示信息
- password：密码输入框
- radio：单选框
- file：文件选择框
- hidden：隐藏域：用于提交一些信息
- select:下拉列表
子元素:option:指定列表项
- textarea：文本域
cols:指定列数:每一行有多少个字符
rows：默认多少行
- 按钮：
- submit:提交按钮，可以提交表单
- button;普通按钮
- image：图片提交按钮，src属性指定图片的路径
-
注意
- 想要个多个单选框实现单选效果，则多个单选框的name属性值必须一样
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checkbox属性，可以指定默认值
- checkbox：复选框
注意：
- 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- checked数学：可以指定默认值
-
- lable;指定输入项的文字描述信息
- 注意：label的for属性一般会和input的id属性值对象，如果对象了，则点击lable区域，会让input输入框获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action = "#" method="get">
<lable for="username">用户名</lable>:<input type ="text" name = "username" placeholder="请输入用户名" id="“username"> <br>
密码：<input type="password" name ="password" placeholder="请输入密码"><br>
性别：<input type = "radio" name ="gender" value="male">男
<input type = "radio" name ="gender" value="female">女<br>
爱好：<input type="checkbox" name = "hobby" value="shopping">逛街
<input type="checkbox" name = "hobby" value="java">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>
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="email" name="email"><br>
年龄:<input type="number" name="age"><br>
省份：<select name ="provice">
<option value="">--请选择——</option>
<option value="1">--北京——</option>
<option value="2">--上海——</option>
<option value="3">--广东——</option>
</select>
<br>
自我描述
<textarea cols="20" rows="5" name="des"></textarea>
<br>
<input type="submit" value="登录"><br>
<input type="button" value="一个按钮"><br>
<input type="image" src="image/img.png">
<input type="submit" value="登录">
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
