HTML标签(下)

表单标签form

HTML表单的主要作用是用来收集用户的输入，当用户提交表单时，浏览器会将表单中收集的数据一并提交到服务器地址，后台接收数据之后，对数据做处理。

<form action="数据提交的路径、地址" method="数据提交的方式get、post">
    <!--提交的数据写在这里-->
    <input type="submit" value="提交按钮">
</form>

1.input标签

type属性表示input标签的类型
text 文本框
password 密码输入框
radio 单选框，保证单选效果需要name属性值一致
checkbox 复选框
submit 提交按钮
reset 重置按钮
file 文件
date 日期
hidden 隐藏域，隐藏当前组件，数据依旧可以提交
button 普通按钮
name属性为当前的表单元素提供一个名称，服务器会根据这个名称来
获取当前表单元素提供的数据，也可以叫做参数名称
id属性用来唯一标识一个标签
value属性当前表单元素提供的数据
checked属性设置单选框或者复选框的选中状态
disabled属性设置表单元素是否可用

2.下拉选择框select…option

name属性标识此表单元素提交信息的关键字

value属性保存关键字对应的数据

multiple属性支持下拉选择框的多选效果

selected属性标识选项option是否被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            height: 20px;
        }
        textarea{
            /*阻止用户拖拽文本域*/
            resize: none;
        }
    </style>
</head>
<body>
<!--表单作用  收集用户信息
    name  控件的名称 键名
    -->
<!--action 后台处理此表单数据的地址
    methond:提交方式
    get 默认 以地址栏参数的方式公开 不安全 20kb / post 安全 数据量大-->
<form action="http://www.baidu.cn" method="get">
    <!--文本输入框 required 必须要填-->
    姓名:<input type="text" name="user_name" required><br>
    <!--隐藏保护-->
    密码:<input type="password" name="password"><br>
    <!--单选框 name="sex" 要是单选，必须加name属性并且值相同-->
    性别:<input type="radio" name="sex">男
    <input type="radio" name="sex">女<br>
    <!--复选框 checkbox-->
    爱好:<input type="checkbox" name="hobbies" value="0"> 运动
        <input type="checkbox" name="hobbies" value="1">睡觉
        <input type="checkbox" name="hobbies" value="2">打麻将
        <input type="checkbox" name="hobbies" value="3">打扑克<br>
    文件:<input type="file" multiple name="myFile"><br>
    反馈:<textarea name="feedback" id="" cols="30" rows="10"></textarea><br>
    按钮:<input type="button" name="btn" value="点击"><br>
    图片提交:<input type="image" src="../day01/img/点赞.png"><br>
    重置:<input type="reset" value="重置"><br>

    <!--h5-->
    <!--打开移动端的数字键盘 pc端看不到 qq 文件发到手机上 浏览器打开-->
    电话:<input type="tel" name="telphone" maxlength="11" minlength="">
    邮箱:<input type="email" name="email" ><br>
    颜色:<input type="color"><br>
    分数:<input type="range" maxlength="100" minlength="0" value="0"><br>
    <!--下拉选择框-->
    <select name="" id="city">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
        <option value="" selected>山西</option>
    </select><br>
    <!--表单里面有且只能有一个-->
    提交:<input type="submit">
</form>
</body>
</html>

表单标签form

1.input标签

2.下拉选择框select…option

猜你喜欢