HTML(Basic) Chapter2(Pink) 表单标签

最新推荐文章于 2023-09-26 07:15:00 发布

FeverTwice

最新推荐文章于 2023-09-26 07:15:00 发布

阅读量183

点赞数

分类专栏： HTML之路文章标签： html html5 前端

本文链接：https://blog.csdn.net/LeungSr/article/details/118709299

版权

HTML之路专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

1. 表格基础语法
2. 示例
写在最后

1. 表格基础语法

使用表单来收集用户信息
表单域（from）表单控件提示信息
表单域 action method(提交方法) name 用于包含表单元素
input(输入元素，单标签) select（选择元素）
label标签，加强用户体验，用户不用点小框框都能够选中图标
text文本框，maxlength使得文本框有输入的最大值
记得将密码改为password类用户看不见的密码
radio单选框，单选按钮或者复选按钮可以实现默认选中状态
name是表单的名字，这里面性别单选按钮必须拥有相同的名字name才可以多选1
checkbox多选框打勾勾，单选按钮和复选框都要有相同的name属性值
value中可以改变里面的值，点击了提交按钮，就会将表单元素的值提交给后台
重置按钮,将表单的值改为重新的默认值
普通按钮 button
上传文件按钮文件域
至少包含有一个option 也可以设置默认的选项

2. 示例

Eg1: 表单标签无序列表

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ul里面只能放li标签 -->
    <h1>无序列表 unordered list</h1>
    <h4>你喜欢吃什么</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>

    <h1>有序列表 ordered list</h1>
    <h4>粉丝数排行</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>FeverTwice 1</li>
    </ol>

    <h1>自定义列表 Difinition List</h1>

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

测试效果

Eg2: 表单标签

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>使用表单来收集用户信息</h1>
    表单域（from） 表单控件 提示信息<br>

    表单域 action method(提交方法) name 用于包含<br>
    表单元素<br>
    input(输入元素，单标签) select（选择元素）<br>

    <form action="demo.php" method="POST" name="name1">

        <h2>input表单标签</h2>
        <br>

        <!-- label标签 -->
        <!-- 加强用户体验，用户不用点小框框都能够选中图标 -->


        <!-- text文本框 -->
        <!-- maxlength使得文本框有输入的最大值 -->
        <label for="text">用户名:</label>
        <input type="text" name="username" value="请输入用户名" maxlength="6" id="text">  <br>
        
        <!-- 记得将密码改为password类用户看不见的密码 -->
        密码:<input type="password" name="password"> <br>
        
        <!-- radio单选框 -->
        <!-- 单选按钮或者复选按钮可以实现默认选中状态 -->
        <!-- name是表单的名字，这里面性别单选按钮必须拥有相同的名字name才可以多选1 -->
        性别:<label for="nan">男</label> <input type="radio" name="sex" value="男" checked = "checked"  id="nan"> 
        女<input type="radio" name="sex" value="女"> 人妖<input type="radio" name="sex" value="人妖"> <br>
        
        <!-- checkbox多选框打勾勾 -->
        <!-- 单选按钮和复选框都要有相同的name属性值 -->

        爱好: 吃饭<input type="checkbox" name = "hobby" value="吃饭"> 睡觉<input type="checkbox" name = "hobby"> 打游戏<input type="checkbox" name = "hobby">
        <br>

        <!-- value中可以改变里面的值 -->
        <!-- 点击了提交按钮，就会将表单元素的值提交给后台 -->
        <input type="submit" value="免费注册">
        <br>

        <!-- 重置按钮,将表单的值改为重新的默认值 -->
        <input type="reset" value="重置属性">
        <br>

        <!-- 普通按钮 button -->
        <input type="button" value="获取短信验证码">
        <br>

        <!-- 上传文件按钮文件域 -->
        上传头像:<input type="file">

        <h2>select（下拉表单）表单标签</h2>
        <br>

        <!-- 至少包含有一个option 也可以设置默认的选项 -->
        籍贯:
        <select>
            <option>山东</option>
            <option>广东</option>
            <option>北京</option>
            <option>火星</option>
        </select>

        <h2>textarea（文本域元素）表单标签</h2>
        <br>

        今日反馈:
        <textarea cols="50" rows="5">老师，我知道这个留言反馈实用textarea来显示的</textarea>

    </form>

    


</body>
</html>