HTML中的表单的使用

最新推荐文章于 2024-09-08 23:05:28 发布

西邮彭于晏

最新推荐文章于 2024-09-08 23:05:28 发布

阅读量736

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_52326703/article/details/123719492

版权

笔记专栏收录该内容

90 篇文章 8 订阅

订阅专栏

在这里插入图片描述 1.input的基本使用：

<body>
    <!-- 写什么就显示什么 -->
    文本框：<input type="text">
    <br>
    <br>
    <!-- 书写的所有内容都为点点点显示 -->
    密码框：<input type="password">
    <br>
    <br>
   单选框： <input type="radio">
   <br>
   <br>
   多选框：<input type="checkbox">
   <br>
   <br>
   上传文件：<input type="file" name="" id="">
</body>

2.占位符：

<body>
<input type="text" placeholder="请输入用户名">
<br>
<br>
<input type="password" placeholder="请输入密码">
</body>

3.单选框：

<body>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>
    <br>
    <input type="checkbox" checked>
</body>

4.上传文件;

<body>
    <!-- 上传多个文件 -->
    <input type="file" multiple>
</body>

5.按钮input;

<body>
    用户名：<input type="text">
    <br>
    <br>
    密码：<input type="password">
    <br>
    <br>
    <!-- 按钮 -->
    <input type="submit" value="免费注册">
    <input type="reset">
    <input type="button" value="普通按钮">
</body>

6.按钮button:

<body>
    <button>我是按钮</button>
    <br>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
</body>

7.下拉表单：

<body>
    <select>
        <option >北京</option>
        <option >上海</option>
        <option >广州</option>
        <option selected>深圳</option>
        <!-- selected 默认选项 -->

    </select>
</body>

8.文本标签域：

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

10：点字实现表单中的选中：

性别：<input type="radio" name="sex" id="nan"><label for="nan">男</label>
        <label > <input type="radio" name="sex">女</label>
        <!-- 点字实现表单的选中 -->

11.综合案例：

<!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>
    <hr>
    <form action=""></form>
    昵称：<input type="text" placeholder="请输入昵称">
    <br>
    <br>
    性别：
    <label ><input type="radio" name="sex" checked>男</label>
    <label ><input type="radio" name="sex">女</label>
    <br>
    <br>
    所在城市：
    <select >
        <option >北京</option>
        <option selected>上海</option>
        <option >深圳</option>
    </select>
    <br>
    <br>
    婚姻状况：
    <label ><input type="radio" name="婚" checked>未婚</label>
    <label ><input type="radio" name="婚" >已婚</label>
    <label ><input type="radio" name="婚" >保密</label>
    <br>
    <br>
    喜欢的类型：
    <label ><input type="checkbox" checked>可爱的</label>
    <label ><input type="checkbox" checked>性感的</label>
    <label><input type="checkbox">御姐</label>
    <br>
    <br>
    个人介绍：
    <br>
    <textarea name="" id="" cols="60" rows="10"></textarea>
    <h3>我承诺</h3>
    <ul>
        <li>我年满18岁、单身</li>
        <li>我年满18岁、单身</li>
        <li>我年满18岁、单身</li>
    </ul>
    <input type="checkbox">我同意所有条款
    <br>
    <br>
    <!-- input标签和button标签 -->
    <input type="submit" value="免费注册">
    <button type="reset">重置</button>
</body>
</html>