HTML表单标签

寒涵含

于 2024-02-11 03:35:36 发布

阅读量251

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_73625238/article/details/136094015

版权

表单标签（用于收集用户信息）

一，表单的组成

由有一个完整的表单域，表单控件（表单元素）和提示信息

二，表单域

<form>标签用于定义表单域 ,实现用户信息收集和传递(会把范围内的单元格提交给服务器)

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

1.action url地址用于指定接收并处理表单数据的服务器程序的url地址

2.method get/post 用于设置表格数据的提交方式，其取值为get或post

3.name 名称用于指定表单的名称，以区分同一个页面的多个表单域

三，表单元素（控件）

（一）input

1.input输入表单元素（用于收集用户信息）

a.<input />是单标签

b.<input>标签中，包含type属性

c.根据不同的type属性值，可以输入字段有多种形式（文本，字段，复制框，掩码后的文本控件，单选选项，按钮等）

<input type="属性值" />

d.<input />表单元素

button 定义可点击按钮（多数情况下，要通过javascript启动脚本）

checkbox 定义复选框

file 定义输入字段和“浏览”按钮，供文件上传

hidden 定义隐藏输入字段

password 定义密码（安全）

radio 定义单选按钮

image 定义图片

reset 定义重置按钮。重置按钮会清除表单的所有数据

submit 定义提交按钮会把表单数据发送到服务器。

text 定义单行输入字段，用户可以在其中输入文本，默认宽度为20个字符

<!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>
    <form>
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        用户名:<input type="text">  <br>
        <!-- password 密码框 无法看到密码 -->
        密码：<input type="password"><br>
        <!-- radio 单选框 注意需要参与单选的要有相同的name属性 -->
        <!-- 单选按钮和复选框可以设置checked，页面打开时默认选中这个，单写也可以 -->
        性别：<input type="radio" name="性别：">男    <input type="radio" name="性别：">女<br>
        <!-- checkbox 多选框 实现多选 -->
        爱好：<input type="checkbox" name="爱好">唱歌 <input type="checkbox" name="爱好">跳舞 <input type="checkbox" name="爱好">rap <input type="checkbox" name="爱好">篮球<br>
        
    </form>
</body>
</html>

2.除了type,<input>标签还有其他属性：

name 由用户自定义(后台查看) 定义input元素名称

value 由用户自定义(后台查看) 规定input元素的值

checked checked 规定此input元素首次加载应当被选中（默认）

maxlength 正整数规定输入字符中的最大字符长度

3.label标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签 </title>
</head>
<body>
    <label for="User">用户名：</label><input type="text" maxlength="8" id="User"><br>
    
    我是：<input type="radio" name="sex" id="man" checked> <label for="man">男</label>
          <input type="radio" name="sex" id="weman"> <label for="weman">女</label>
   
</body>
</html>

用于辅助选择

（二）select（下拉列表）

1.页面空间中使用可以节约页面空间

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

注意：

1.<select>中至少需要包含一对<option>

2.在<option>中定义selected="selected"，默认选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select 标签</title>
</head>
<body>
    <form>
    籍贯：
    <select>
        <option>美国</option>
        <option selected>中国</option>
        <option>日本</option>
        <option>韩国</option>
        <option>法国</option>
        <option>英国</option>
    </select>
    </form>
</body>
</html>

（三）textarea（文本域元素）

输入内容较多的情况下，使用<textarea>标签，常见与留言板、评论

语法：

<textarea row="3" cols="20">
文本内容
</textarea>

cols表示一行多少字符，rows表示几行。实际使用过程使用CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea 标签</title>
</head>
<body>
    <form>
        今日反馈：
        <!-- cols表示一行多少字符，rows表示几行。实际使用过程使用CSS -->
        <textarea cols="10" rows="5">
            我爱哟西，我爱劲爽冰红茶。
        </textarea>
    </form>
</body>
</html>

寒涵含

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML表单标签

head></head><body><form>-- text 文本框用户可以在里面输入任何文字 -->用户名:<input type="text"> <br>-- password 密码框无法看到密码 -->密码：<input type="password"><br>-- radio 单选框注意需要参与单选的要有相同的name属性 -->-- 单选按钮和复选框可以设置checked，页面打开时默认选中这个，单写也可以 -->
复制链接

扫一扫