HTML笔记9

最新推荐文章于 2024-07-15 15:35:16 发布

LiNO3

最新推荐文章于 2024-07-15 15:35:16 发布

阅读量761

点赞数

分类专栏：笔记文章标签： html 编辑器前端

本文链接：https://blog.csdn.net/qq_60471941/article/details/121490313

版权

笔记专栏收录该内容

54 篇文章 2 订阅

订阅专栏

表单标签

目的：收集用户信息

组成：表单域，表单控件（表单元素），和提示信息

1.表单域,包含表单元素的区域

作用：将范围内的表单元素信息提交给服务器

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

2.表单控件（表单元素）

input输入表单元素
select下拉表单元素
textarea文本域元素

1.input

1.input标签用于收集用户信息

特点：1、单标签

2、type属性设置不同的属性值用来指定不同的控件类型

<input type="属性值"/>

属性值	描述
text	定义单行的输入字段，用户可在其中输入文本，默认为20个字符
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
checkbox	定义复选框（多选）
submit	定义提交按钮，提交按钮将表单数据发送到服务器（用value属性设定其显示的字）
reset	定义重置按钮，还原表单的初始状态
button	定义普通按钮（配合js使用）
file	定义按钮，供文件上传
...	...

type外的其他属性

属性	属性值	描述
name	自定义	定义inpuit元素的名称（只有单选的name相同时才能实现单选）单选和复选都要有相同的name
value	自定义	规定默认input元素的值（给后台人员看）只有text中会直接显示value值
checked	checked	规定input首次加载时一点被选中（radio，checkbbox时使用）
maxlength	正整数	规定输入字段的最大长度

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>
    <br>
    <form>
        <h2>text</h2>
        <input type="text" name="text" value="text" maxlength="5">
        <br>
        <h2>password</h2>
        <input type="password" name="password" value="12345" maxlength="7">
        <br>
        <h2>radio</h2>
        a<input type="radio" name="radio" value="a">b <input type="radio" name="radio" value="b" checked="checked">c<input type="radio" name="radio" value="c">
        <h2>checkbox</h2>
        a <input type="checkbox" name="checkbox" value="a" checked="checked">b<input type="checkbox" name="checkbox" value="b" checked="checked">c<input type="checkbox" name="checkbox" value="c">
        <h2>submit</h2>
        <input type="submit" value="提交">
        <input type="reset" value="重新设置">
        <input type="button" value="普通按钮">
        <br> 上传文件
        <input type="file">
    </form>

相关标签：

<lable></lable>标签

作用：用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动转到对应的表单元素上，用来增加用户体验。

核心：for属性的属性值与相关元素的id属性值相同

例：

<label for="a">a</label><input type="radio" name="radio" value="a" id="a">

完整

<!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>表单标签</title>
</head>

<body>
    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>
    <br>
    <form>
        <label for="text"><h2>text</h2></label>
        <input type="text" name="text" value="text" maxlength="5" id="text">
        <br>
        <label for="password"><h2>password</h2></label>
        <input type="password" name="password" value="12345" maxlength="7" id="password">
        <br>
        <h2>radio</h2>
        <label for="a">a</label><input type="radio" name="radio" value="a" id="a">
        <label for="b">b</label> <input type="radio" name="radio" value="b" checked="checked" id="b">
        <label for="c">c</label><input type="radio" name="radio" value="c" id="c">
        <h2>checkbox</h2>
        <label for="a1">a</label> <input type="checkbox" name="checkbox" value="a" checked="checked" id="a1">
        <label for="b1">b</label><input type="checkbox" name="checkbox" value="b" checked="checked" id="b1">
        <label for="c1">c</label><input type="checkbox" name="checkbox" value="c" id="c1">
        <h2>submit</h2>
        <input type="submit" value="提交">
        <input type="reset" value="重新设置">
        <input type="button" value="普通按钮">
        <br> 上传文件
        <input type="file">
    </form>
</body>

</html>

2.select，下拉表单元素

使用场景：页面中有多个选项让用户选择，可以使用控制<select>标签定义下拉列表节约页面空间。

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

注意：

<select>中至少包含一对<option>

在<option>中定义selected="selected"

例

<h2>下拉表单</h2>
        <select>
            <option>a</option>
            <option selected="selected">b</option>
            <option>c</option>
            <option>d</option>
            <option>e</option>
        </select>

textarea文本域元素

<textarea>使用场景：输入内容较多时

作用：用来定义多行文本输入的控件

1.通过<textarea>标签可以创建多行文本输入框

2.cols=“每行的字符数”，rows=“显示的行数”（实际开发中不会使用，用css改变）

<testarea>
    文本内容
    文本内容
    。。。
</testarea>

LiNO3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记9

表单标签目的：收集用户信息组成：表单域，表单控件（表单元素），和提示信息1.表单域,包含表单元素的区域作用：将范围内的表单元素信息提交给服务器<form></form> <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form> 2.表单控件（表...
复制链接

扫一扫