web前端—前端三剑客之html：表单与表格

最新推荐文章于 2023-12-14 17:12:21 发布

觅远

最新推荐文章于 2023-12-14 17:12:21 发布

阅读量207

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/JBY2020/article/details/116537711

版权

参见：https://blog.csdn.net/JBY2020/article/details/109591677

form表单

<!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>
    <style>
        *{
            margin-top: 0;
        }
        div{
            width: 400px;
            background-color: rgba(63, 173, 209, 0.301);
            border-radius: 5px;
            margin: auto;           
        }
        input{
            text-align: center;
        }
        fieldset{
            border: gold solid 3px;
            border-radius: 3px;
            margin: 3px;
        }
        legend{
            color: lime;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <form action="">
            <p>用户名：<input type="text" value="jbr123" placeholder="请输入用户名" maxlength="8"></p>
            <p>密&emsp;码：<input type="password" placeholder="请输入密码" maxlength="12"></p>
            <p> 邮&emsp;箱：<input type="email" placeholder="请输入邮箱"></p>
            <p>金&emsp;额：<input type="number" style="width: 245px;" placeholder="请输入金额" value="0.01" step="0.01" min="0.01" max="10000.00" maxlength="8">&nbsp;元</p>
            <p>数&emsp;量：<input type="range" min="0" max="100" step="10" value="0"></p>
            <p>日&emsp;期：<input type="date"></p>
            <p>时&emsp;间：<input type="time"></p>
            <p>月&emsp;份：<input type="month"></p>
            <p>周&emsp;&emsp;：<input type="week"></p>
            <p>日期时间：<input type="datetime-local"></p>
            <p>颜&emsp;色：<input type="color"></p>
            <p>文&emsp;件：<input type="file"></p>
            <p>多个文件：<input type="file" multiple></p>

            <p>单&emsp;选：<input type="radio" name="sex" id="man"><label for="man">男</label>
                <input type="radio" name="sex" id="woman"><label for="woman">女</label></p>
            <p>选择一个国家：
              <select name="东亚" id="">
                    <optgroup label="共产主义">
                        <option value="China" selected>中国</option>
                        <option value="North Korea">朝鲜</option>
                    </optgroup>
                    <optgroup label="资本主义">
                        <option value="South Korea">韩国</option>
                        <option value="Japan">日本</option>
                        <option value="Mongolia">蒙古</option>
                    </optgroup>
              </select>
            </p>
            <p>评论一下：<textarea name="" id="" cols="20" rows="10"></textarea></p>
            <fieldset>
                <legend>几种按钮</legend>
                <p>图片按钮：<input type="image"  style="width: 10%; height: 10%;" src="https://res.shiguangkey.com/file/2021/4/26/16194074076299399996942.jpg?x-oss-process=image/format,jpg" alt="这是一个图片按钮"></p>
                <p>点击按钮：<input type="button" value="请点击"></p>
                <p>提交按钮：<input type="submit" value="提交"></p>
                <p>重置按钮：<input type="reset" value="重置"></p>
            </fieldset>
        </form> 
    </div>
</body>
</html>

浏览器在网页上专门用来划分出一个用来存储表单元素的区域的form标签元素，这个元素是一个块元素。

form标签的两个重要的属性：

action属性，内部是一个链接，指明要提交表单信息的服务器地址来发送表单数据。

method属性，内部存储着该表单向目标服务器传输数据时采用的方式。

form表单中的常用标签

input标签

input标签在form元素中使用，用来展示用户可以输入数据的元素。input是行内块元素。

input标签最终的表现形式和传输至服务器的数据类型，取决于type属性。type属性内部是存储着该input元素输入信息的类别（如文字，单选，邮箱，电话号码，多选框等）。input标签的name属性内部存储着该input元素的名称。

文本输入框：

type属性值：

text：文本输入框

email：邮箱输入框

password：密码输入框，用户输入密码为密文显示

number：数字

range：滑动条

date：日期

time：时间

month：月份

week：择周

datetime-local：日期时间

color：颜色

file：选择文件，默认是选择单个文件，如果需要选择多个文件的时候，添加multiple属性即可。

radio：单选，name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”。

checkbox：name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”

label元素：扩大用户选中input元素的区域，点击关联的文字就可选择，不只是单单去点击按钮选择，for属性的存储的对应input元素的id名称，如在单选中选择时，不使用label关联元素，只能点击选择框选择，而不能点击关联的文字选择。

image：图片形式的按钮

button：普通按钮

submit：提交按钮

reset：重置按钮

常用属性

placeholder属性：占位符，placeholder=“请输入用户名”，占位符的作用是在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击输入框并输入任意信息后会自动消失

value属性：默认的输入内容，用户在输入的时候需要手动清除后才能输入其他内容

min属性：限制输入的最小值

max属性：限制输入的最大值

maxlength属性：限制输入内容的长度

step属性：设置输入数字的步长

select标签

select为下拉选择，创造一个下拉选项列表，select中的name值表示这个下拉选项列表的名称。

option标签：是包含在select中的下拉列表选项，option中的value值表示用户选择这个选项后，表单向服务器发送的数据，option元素中如果有一个selected的单词，这表示，该选项为此下拉选项列表的默认选择

optgroup标签是包含在select标签中的，用来包裹option标签，可以对下拉列表选项分组。

textarea标签

用来创造一个文本输入区域，rows属性表示这个文本输入区域默认的高，cols属性表示这个文本输入区域默认的宽，这里的宽高指的是字符

fieldset标签

可以将表单内的相关元素分组，会在相关表单元素周围绘制边框

legend 标签包裹在fieldset标签中，为fieldset元素定义标题

表格

属性

border-collapse：边框分隔（collapse，separate）

border-spacing：边框间距

表格的其他属性见：https://blog.csdn.net/JBY2020/article/details/109591677

觅远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
web前端—前端三剑客之html：表单与表格

目录form表单form表单中的常用标签input标签常用属性select标签textarea标签fieldset标签表格标签属性参见：https://blog.csdn.net/JBY2020/article/details/109591677form表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫