588_HTML标签_表单标签_概述and589 _HTML标签_表单标签_表单项input1

HTML标签_表单标签_概述

表单标签

表单：　　

form:用于定于表单的。可以定一个范围，范围代表采集用户数据的范围
        属性：
            action：指定提交数据的url
            method：指定提交方式
               分类：一共七种，2种比较常用
                get：
                    1.请求参数会在地址栏中显示。会封装到请求行中（HTTP协议后详解）
                    2.请求参数大小是有限制的
                    3.不太安全
                post：
                    1.请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议后详解）
                    2.请求的参数大小没有限制
            表单项中的数据要想被提交：必须指定name属性

表单项标签︰

　　input :可以通过type属性值，改变元秦展示的样式

　　　　type属性:

　　　　　　text :文本输及框

　　　　　　　　placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

　　　　　　password :密码输入框

　　　　　　radio:单选框

　　　　　　　　注意：

　　　　　　　　　　1.要想让多个单选框实现单选的功能，则多个单选框name属性值必须一样

　　　　　　　　　　2.一般会给每一个单选框提供value属性，指定其被选中后提交的值

　　　　　　checkbox：复选框

　　　　　　　　　　注意：
　　　　 1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
　　　　 2. checked属性，可以指定默认值

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    form:用于定于表单的。可以定一个范围，范围代表采集用户数据的范围
        属性：
            action：指定提交数据的url
            method：指定提交方式
               分类：一共七种，2种比较常用
                get：
                    1.请求参数会在地址栏中显示。会封装到请求行中（HTTP协议后详解）
                    2.请求参数大小是有限制的
                    3.不太安全
                post：
                    1.请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议后详解）
                    2.请求的参数大小没有限制
            表单项中的数据要想被提交：必须指定name属性

-->
<!--指定提交数据的网址和提交的方式-->
<form action="#" method="get">
<!--设置用户名密码输入框-->
    <!--文本输入框   提交内容     提交的什么内容    输入框内显示请输入用户名-->
                    <!--用户名是来描述后面input标签里面的内容的-->
    <label for="zxc">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="zxc"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    <!--选择框      单选项      提交内容   提交的什么内容      默认选择-->
    性别：<input type="radio" name="gender" value="male" checked="checked">男
         <input type="radio" name="gender" value="female" >女<br>
    爱好：<input type="checkbox" name="hobby" value="shopping">逛街
         <input type="checkbox" name="hobby" value="shuijiao">睡觉
         <input type="checkbox" name="hobby" value="geme">打游戏
    <br>
<!--设置登录按钮-->
    <input type="submit" value="登录">
</form>
</body>
</html>