HTML（3），各种表单及运用

最新推荐文章于 2024-04-24 14:37:39 发布

小白一枚2号

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量310

点赞数 6

文章标签： html 前端 java

本文链接：https://blog.csdn.net/2303_79590957/article/details/134493729

版权

文本框：<input type="text">

文本框，顾名思义，是用来输入文本的，但只能输入单行文本。

如上，一个单纯的<input type="text">

我们可以在该标签的前面加点东西来告诉用户这个框是什么，再给标签加个placeholder，用来提示用户输入什么信息，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
</body>
</html>

于是就变成了这样：

密码框：<input type="password">

经常偷看别人密码的小朋友都知道，看密码一定不能看屏幕因为屏幕看不出来什么

同理，就一个框框太单调，我们可以像改造文本框一样改造它，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
</body>
</html>

效果如下：

单选<input type="radio">

虽然看着单选和上面的差不多，实际上差别很大，因为它的属性是name(分组)和checked(默认选中)，并且，在不加属性的情况下，它只有一个小圆圈，此外，它还经常和label标签（绑定文字与表单控件的关系，增大表单控件的点击范围）代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    性别：<input type="radio" id="man" name="gender">
    <label for="man">男</label>
    <input type="radio" id="woman" name="gender">
    <label for="woman">女</label>
</body>
</html>

效果如上，当点击男后，在点击女时，男的选中状态会被解除

多选：<input type="checkbox">

它和单选类似，但是不需要name分组，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    性别：<input type="radio" id="man" name="gender">
    <label for="man">男</label>
    <input type="radio" id="woman" name="gender">
    <label for="woman">女</label>
    <br>
    兴趣爱好：<label><input type="checkbox">敲C语言代码</label>
    <label><input type="checkbox">敲前端代码</label>
    <label><input type="checkbox">敲后端代码</label>
</body>
</html>

上传文件：<input type="file">

当只有该标签时只有

并且只能上传一个文件，如果想上传多个文件，就需要属性：multiple，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    性别：<input type="radio" id="man" name="gender">
    <label for="man">男</label>
    <input type="radio" id="woman" name="gender">
    <label for="woman">女</label>
    <br>
    兴趣爱好：<label><input type="checkbox">敲C语言代码</label>
    <label><input type="checkbox">敲前端代码</label>
    <label><input type="checkbox">敲后端代码</label>
    <br><br>
    你想上传的文件：<input type="file" multiple>
</body>
</html>

效果如下：

下拉菜单：<select name="" id=""></select>

对于下拉菜单的name和id，需要配合CSS使用，这里我们不做解释，现在只学<select></select>代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    性别：<input type="radio" id="man" name="gender">
    <label for="man">男</label>
    <input type="radio" id="woman" name="gender">
    <label for="woman">女</label>
    <br>
    兴趣爱好：<label><input type="checkbox">敲C语言代码</label>
    <label><input type="checkbox">敲前端代码</label>
    <label><input type="checkbox">敲后端代码</label>
    <br><br>
    你想上传的文件：<input type="file" multiple>
    <br><br>
    城市：
    <select>
        <option cheched>北京</option>
        <option>上海</option>
        <option>江西</option>
        <option>武汉</option>
    </select>
</body>
</html>

效果如下：

文本域：<textarea name="" id="" cols="30" rows="10"></textarea>

name和id同上，cols和aows控制长宽，但一般在CSS里设置，标签中间输入提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号：<input type="text" placeholder="请输入账号">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>
    性别：<input type="radio" id="man" name="gender">
    <label for="man">男</label>
    <input type="radio" id="woman" name="gender">
    <label for="woman">女</label>
    <br>
    兴趣爱好：<label><input type="checkbox">敲C语言代码</label>
    <label><input type="checkbox">敲前端代码</label>
    <label><input type="checkbox">敲后端代码</label>
    <br><br>
    你想上传的文件：<input type="file" multiple>
    <br><br>
    城市：
    <select>
        <option cheched>北京</option>
        <option>上海</option>
        <option>江西</option>
        <option>武汉</option>
    </select>
    <br><br>
    留言：
    <br>
    <textarea cols="30" rows="10">去输入你想对我们说的话</textarea>
</body>
</html>

效果如下：