HTML表单标签

最新推荐文章于 2024-08-29 18:44:48 发布

野生技术协会副会长

最新推荐文章于 2024-08-29 18:44:48 发布

阅读量101

点赞数

文章标签： java html web

本文链接：https://blog.csdn.net/weiyoo55/article/details/108382433

版权

HTML表单标签

表单
1.概念：用于采集用户输入的数据的。用于和服务器进行交互

2.form：用于定义一个范围，范围代表采集用户数据的范围
2.1 属性：
2.1.1 action；提交数据的URL
2.1.2 method：指定提交方式
2.1.2.1 分类：一共7种，2种比较常用

get：
1.请求参数会在地址栏中显示，会封装到请求行中（HTTP协议后讲解）
2.请求参数的大小是有限制的
3.不太安全
post：
1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
2.请求参数的大小没有限制
3.较为安全
2.2 表单项中的数据要想被提交：必须指定name属性

3.表单项标签：
3.1 <input>：可以通过type属性值，改变元素展示的样式
3.1.1 type属性：

text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性,可以指定默认值
checkbox：复选框
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.checked属性,可以指定默认值
file：文件选择框
hidden：隐藏域,用于提交一些信息
按钮：
submit：提交按钮，可以提交表单
button：普通按钮
image：图片提交按钮 src属性指定图片的路径

3.1.2<label>：指定输入项的文字描述信息
注意：
label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让imput 输入框获取焦点。

3.2 <select>：下拉列表

子元素:option，指定的列表项

3.2<textarea>：文本域

cols：指定列数，每一行有多少个字符

rows：默认多少行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<!--
form:用于定义一个范围，范围代表采集用户数据的范围
     *属性：
          *action；提交数据的URL
          *method：指定提交方式
                 *分类：一共7种，2种比较常用
                     get：
                         1.请求参数会在地址栏中显示，会封装到请求行中（HTTP协议后讲解）
                         2.请求参数的大小是有限制的
                         3.不太安全
                     post：
                         1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议后讲解）
                         2.请求参数的大小没有限制
                         3.较为安全
     *表单项中的数据要想被提交：必须指定name属性
-->
<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" checked>男
    <input type="radio" name="gender" value="female">女
    <br>
    爱好：<input type="checkbox" name="hobby" value="shopping">逛街
          <input type="checkbox" name="hobby" value="java" checked="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" selected>贵州</option>
          <option value="3">四川</option>
          </select><br>
    自我描述：
            <textarea cols="20" rows="5" name="des"></textarea>
    <input type="submit" value="登录">
    <input type="button" value="一个按钮"><br>
    <input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>

野生技术协会副会长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单标签

HTML表单标签表单1.概念：用于采集用户输入的数据的。用于和服务器进行交互2.form：用于定义一个范围，范围代表采集用户数据的范围2.1 属性：2.1.1 action；提交数据的URL2.1.2 method：指定提交方式2.1.2.1 分类：一共7种，2种比较常用get： 1.请求参数会在地址栏中显示，会封装到请求行中（HTTP协议后讲解） 2.请求参数的大小是有限制的 3.不太安全post：1.请求参数不会在地址栏中
复制链接

扫一扫