当前位置：首页 > 编程语言 > HTML > 正文

【HTML基础教程】2、表单标签

webrank
HTML
2024-01-23
25

【HTML基础教程】2、表单标签

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签为表单元素定义文字标注

for 属性规定 label 与哪个表单元素绑定。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

3、<input>标签定义通用的表单元素

type属性

type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
type="image" 定义图片作为提交按钮，用src属性定义图片地址
type="hidden" 定义一个隐藏的表单域，用来存储值

value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签定义多行文本输入框

5、<select>标签定义下拉表单元素

6、<option>标签与<select>标签配合，定义下拉表单元素中的选项

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>注册表单</h1>
    <form action="" method="get">
        <!-- 注意：label中的for用法 -->
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" />
        
        <label for="password">密&nbsp;码：</label>
        <input type="password" name="password" id="password">
        <label for="">性&nbsp;&nbsp;别：</label>
        <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
        <input type="radio" name="gender" value="0" id="female"><label for="female">女</label>
        <div>
            <label for="">爱&nbsp;好：</label>
            <input type="checkbox" name="like" value="study">学习
            <input type="checkbox" name="like" value="python">Python
            <input type="checkbox" name="like" value="html">前端
            <input type="checkbox" name="like" value="beauty">html
        </div>
        
        <div>
            <label for="">玉&nbsp;照</label>
            <input type="file" name="">
        </div>
        
        <div>
            <label for="">个人描述：</label>
            <textarea name="introduce" id="" cols="30" rows="10"></textarea>
        </div>
        
        <div>
            <label for="">籍贯</label>
            <select name="site" id="">
                <option value="0">北京</option>
                <option value="1">天津</option>
                <option value="2">云南</option>
                <option value="3">山西</option>
                <option value="4">河南</option>
            </select>
        </div>
      
        <div>
            <input type="submit" name="" value="提交">
            <input type="reset" value="清空">
        </div>
    </form>
</body>
</html>

HTML基础教程