表单项标签简单学习

就是蠢啊

于 2024-09-07 16:54:52 发布

阅读量421

点赞数 17

分类专栏：前端简单学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_74012211/article/details/141995168

版权

前端简单学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 单选框 radio编辑编辑编辑编辑

2. 复选框 checkbox 编辑编辑编辑

3. 隐藏域 hidden

4. 多行文本框 textarea编辑编辑

5. 下拉框 select编辑编辑

6. 选择头像编辑编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签测试</title>
</head>
<body>
        <!-- 设置提交地址和提交方式 -->
        <form action="01-HTML.html" method="get">
        <!-- 添加表单项标签：即用户输入信息的标签 -->
        <!-- 希望用户提交一些特定的信息，但是考虑到安全问题或者用户操作问题，
        不希望该数据发生改变-->
        <input type="hidden" name="id" value="123">    <br>
        <input type="text" name="pid" value="456" readonly>  <br>
        <input type="text" name="tid" value="789" disabled>  <br>
    用户名：<input type="text" name="zhangsan" />   <br>
    密码：<input type="password" name="userpwd" />  <br>
        <!-- 添加登录与清空按钮 -->
        <input type="submit" value="登录" />
        <input type="submit" value="清空" /> <br>
        <!-- 性别 -->
    性别：
        <input type="radio" name="gender" value="1" checked> 男
        <input type="radio" name="gender" value="0">        女 <br>
    爱好：
        <input type="checkbox" name="hobby" value="1"> 足球
        <input type="checkbox" name="hobby" value="2"> 排球
        <input type="checkbox" name="hobby" value="3"> 羽毛球
        <input type="checkbox" name="hobby" value="4"> 铅球 <br>
    个人简介：
        <!-- 没有value属性 -->
        <textarea name="intro" style="width: 500;height: 1000;"></textarea> <br>
    选择头像：<input type="file"> <br>
    籍贯:
        <select name="address">
            <option value="1">京</option>
            <option value="2">津</option>
            <option value="3">冀</option>
            <option value="4">请选择</option>
        </select>
    </form>
</body>
</html>

注意：

name：表单元素的名字，方便后台区分每个表单元素；

value：作为提示信息给用户 / 后台人员查看选择的信息；