HTML常见标签——表单form标签

他咔咔咔

已于 2024-07-17 23:00:58 修改

阅读量598

点赞数 15

文章标签： html 前端 javascript

于 2024-07-17 22:23:53 首次发布

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140478777

版权

一、表单标签简介

表单标签form用于收集、采集信息。可以用于用户登录、注册功能时，收集用户的账号、密码等信息。在开发过程中如果需要实现登录、注册、评论、留言、表白墙、聊天室等功能，可以使用表单标签。

二、常用的表单元素

1、form元素

form 属于块级元素，可以独占一行显示，可以直接设置宽度高度。 form 标签点击“提交”按钮，会刷新页面，页面会发生跳转。

功能：用于创建一个表单

格式：<form action="xx" method="xx"></form>

表单元素的属性

表单元素包含action和method等属性，作用如下：

属性名称	作用
action	指定表单提交的地址，一般为服务器接口地址
method	指定表单提交的方式，一般为get或post

代码如下，其中action一般为服务器接口地址，method一般为get或post。

<form action="xxx.com" method="post/get"></form>

2、input元素

input 属于行内块元素，在同一行显示，可以直接设置宽度高度，如果不想input在同一行显示，可以用div包裹起来，input标签属于单标签。

功能：作为表单中的输入框，有多种类型（如文本输入框、密码输入框等），根据type属性来确定输入框的类型

格式：<input text="xx" placeholder="xx" name="xx" id="" checked/selected/disabled>

输入框元素的属性

type属性

input标签的type属性用于指定输入框类型，可以是text、password、checkbox、radio、submit、reset等，type属性的属性值及其作用如下：

属性类型（type值）	作用
text	文本输入框
password	密码输入框
checkbox	复选框
radio	单选框，如果需要单选，要设置name属性
submit	提交按钮，默认有一个“提交”的按钮
reset	重置按钮，默认有一个“重置”的按钮
button	按钮，默认只有一个方格，需要设置value显示按钮的值
color	颜色选择框
file	上传文件按钮，如果需要上传多个文件，需要设置multiple
number	数字输入框，只能输入数字
date	日期选择框
time	时间选择框

type属性指定了输入框的类型，代码如下：

<form action="">
    <div>
        <!-- 文本输入框 -->
        <input type="text">
    </div>
    <div>
        <!-- 密码输入框 -->
        <input type="password">
    </div>
    <div>
        <!-- 复选框 -->
        爱好：
        <input type="checkbox">打篮球
        <input type="checkbox">听音乐
        <input type="checkbox">踢足球
        <input type="checkbox">唱歌
    </div>
    <div>
        性别：
        <input type="radio" checked>男
        <input type="radio">女
    </div>
    <div>
        <input type="submit">
        <input type="reset">
        <input type="button" value="按钮">
    </div>
    <div>
        <input type="color">
    </div>
    <div>
        <input type="file">
        <!-- 如果需要选择多个文件，设置multiple属性 -->
        <input type="file" multiple>
    </div>
    <div>
        <!-- 数字输入框 -->
        <input type="number">
    </div>
    <div>
        <!-- 日期选择框 -->
        <input type="date">
    </div>
    <div>
        <!-- 时间选择框 -->
        <input type="time">
    </div>
</form>

效果如下

placeholder属性

placeholder属性用于提示用户输入内容，一般只设置输入框的提示内容。

<form action="">
    <div>
        <input type="text" placeholder="文本输入框">
    </div>
    <div>
        <input type="password" placeholder="密码输入框">
    </div>
    <div>
        <input type="number" placeholder="数字输入框">
        </input>
    </div>
</form>

效果如下

name属性

name 键（key）用于给input标签设置名称，方便服务器端处理。

name属性相同的单选按钮组。

如果单选按钮没有设置name属性，会选中多个，代码如下：

<form action="">
    <div>
        性别
        <input type="radio">男
        <input type="radio">女
    </div>
</form>

效果如下：

这时候性别两个选项都能选择，不符合逻辑，需要设置name属性使得只能选择一个。

<form action="">
    <div>
        性别
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </div>
</form>

disabled属性

disabled属性表示禁用，不会被选择。代码如下：

<form action="">
    <div>
        <input type="text" disabled placeholder="禁止输入">
    </div>
</form>

效果如下，此时无法编辑输入框

checked属性

checked在单选框、复选框中表示默认选中，代码如下：

<form action="">
    <div>
        性别：
        <input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女
    </div>
</form>

效果如下

3、select下拉菜单

功能：用于创建一个下拉菜单

格式：

<select name="" id="">

<option>选项</option>

</select>

seleted在下拉菜单中表示默认选中

<div>
    城市：
    <select name="" id="">
        <option value="0" disabled selected>请选择城市</option>
        <option value="1">广州</option>
        <option value="1">上海</option>
        <option value="1">深圳</option>
    </select>
</div>

效果如下：

三、表单标签代码演示

<form action="">
<div>
    <input type="text" placeholder="文本输入框">
</div>
<div>
    <input type="password" placeholder="密码输入框">
</div>
<div>
    <input type="number" placeholder="数字输入框">
</div>
<div>
    <input type="date" name="" id="">
</div>
<div>
    <input type="time">
</div>
<div>
    <!-- 0 - 9 十进制 -->
    <!-- 0 - f 十六进制 -->
    <input type="color" value="#ff0000">
</div>
<div>
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
</div>
<div>
    性别：
    <!-- name属性相同的单选按钮组 -->
    <!-- checked属性表示默认选中 -->
    <input type="radio" name="sex" checked>男
    <input type="radio" name="sex">女
</div>
<div>
    爱好：
    <input type="checkbox" name="" id="">阅读
    <input type="checkbox" name="" id="">听音乐
    <input type="checkbox" name="" id="">打篮球
    <input type="checkbox" name="" id="">跑步
</div>
<div>
    <select name="province" id="">
        <!-- disabled属性表示禁用，不会被选择 -->
        <option value="0" disabled>请选择省份</option>
        <option value="1">浙江省</option>
        <!-- selected属性表示默认选中 -->
        <option value="1" selected>福建省</option>
        <option value="1">湖北省</option>
    </select>
</div>

<!-- 禁止输入 -->
<div>
    <input type="text" placeholder="禁止输入" disabled>
</div>
<!-- 
checked在单选框、复选框中表示默认选中
seleted在下拉菜单中表示默认选中
disabled表示禁用
    -->

<div>
    <!-- 选择文件的标签 -->
    <input type="file" name="photo">
    <!-- multiple属性表示可以选择多个文件 -->
    <input type="file" multiple>
</div>

<!-- 
    label标签
    label标签的for属性对应input标签的id属性，点击描述文本，输入框可以获取焦点
    -->
<div>
    <label for="username">用户名：</label>
    <input type="text" id="username">
</div>

</form>

最终效果图

他咔咔咔

关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
HTML常见标签——表单form标签

表单标签form用于收集、采集信息。可以用于用户登录、注册功能时，收集用户的账号、密码等信息。在开发过程中如果需要实现登录、注册、评论、留言、表白墙、聊天室等功能，可以使用表单标签。
复制链接

扫一扫