目录
HTML标签：表单标签
表单
- 概念：用于采集用户输入的数据的。用于和服务器进行交互。
- form：用于定义表单的。
- 可以定义一个范围，范围代表采集用户数据的范围
属性：
action
- 指定提交数据的URL
method
- 指定提交方式
- 分类：一共7种，2种比较常用
get
- 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
- 2. 请求参数大小是有限制的。
- 3. 不太安全。
post
- 1 .请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
- 2. 请求参数的大小没有限制。
- 3. 较为安全。
- 表单项中的数据要想被提交：必须指定其name属性
表单项标签
- input：可以通过type属性值，改变元素展示的样式
- type属性：
text
- 文本输入框，默认值
- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password
- 密码输入框
radio
- 单选框
- 注意：
- 1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
- 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- 3. checked属性，可以指定默认值
checkbox
- 复选框
- 注意：
- 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
- 2. checked属性，可以指定默认值
file
- 文件选择框
hidden
- 隐藏域，用于提交一些信息。
按钮
- submit：提交按钮。可以提交表单
- button：普通按钮
- image：图片提交按钮
- src属性指定图片的路径
- label：指定输入项的文字描述信息
- 注意：
- label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- select: 下拉列表
- 子元素：option，指定列表项
- textarea：文本域
cols
- 指定列数，每一行有多少个字符
rows
- 默认多少行
案例1：表单标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="#" method="post"> 用户名：<input type="text" name="username"><br> 密码：<input name="password"><br> <input type="submit" value="登录" > </form> </body> </html>案例2：表单标签_表单项标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <form action="#" method="get"> <label for="username"> 用户名 </label>：<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" checked> 女 <br> 爱好：<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> 生日：<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="province"> <option value="">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected>陕西</option> </select><br> 自我描述： <textarea cols="20" rows="5" name="des"></textarea> <br> <input type="submit" value="登录" > <input type="button" value="一个按钮" ><br> <input type="image" src="img/regbtn.jpg"> </form> </body> </html>案例3：注册页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <!--定义表单 form--> <form action="#" method="post"> <table border="1" align="center" width="500"> <tr> <td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td><label for="password">密码</label></td> <td><input type="password" name="password" id="password"></td> </tr> <tr> <td><label for="email">Email</label></td> <td><input type="email" name="email" id="email"></td> </tr> <tr> <td><label for="name">姓名</label></td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td><label for="tel">手机号</label></td> <td><input type="text" name="tel" id="tel"></td> </tr> <tr> <td><label>性别</label></td> <td><input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td><label for="birthday">出生日期</label></td> <td><input type="date" name="birthday" id="birthday"></td> </tr> <tr> <td><label for="checkcode">验证码</label></td> <td><input type="text" name="checkcode" id="checkcode"> <img src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册"></td> </tr> </table> </form> </body> </html>
HTML笔记：HTML标签-表单标签
猜你喜欢
转载自blog.csdn.net/baidu_41388533/article/details/108459693
今日推荐
周排行