HTML5系列 08 表单系标签

最新推荐文章于 2024-04-18 13:44:35 发布
最新推荐文章于 2024-04-18 13:44:35 发布
阅读量244 收藏 1
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422005/article/details/118701799
版权

form 表单

基本介绍

form表单可用于向服务端提交数据，它是一个块级标签。

我们常见的登录框、留言板等很多功能都是通过form表单完成的，使用form表单进行数据提交会导致页面的刷新。

下面将采用flask框架作为后端，使用form表单进行一次数据提交。

后端代码：

from flask import Flask
from flask import request

app = Flask(__name__)


@app.route("/get", methods=['GET'])
def get_handler():
    return f"{request.args}"


@app.route("/post", methods=['POST'])
def post_handler():
    return f"{request.form}"

if __name__ == "__main__":
    app.run(debug=True)

前端代码：

<!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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/get" method="get">
        <div>
            <label for="username">username</label>
            <input type="text" name="username" placeholder="please enter user name" id="username">
        </div>
        <br>
        <div>
            <label for="password">password</label>
            <input type="password" name="password" placeholder="please enter user password" id="password">
        </div>
        <br>
        <div>
            <label for="male">male</label>
            <input type="radio" name="gender" value="male" id="male" checked>
            <label for="female">female</label>
            <input type="radio" name="gender" value="female" id="female">
        </div>
        <br>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>
</body>

</html>

整体效果如下：

from表单提交

前端提交的数据会被后端的服务器所接收到。

action 提交地址

form表单中action属性可设置表单内容的提交地址。

它指向一个url，一般情况下我们都会加上完整url，但如果你是前后端混合开发项目的话则可以不用加完整url。

下面这个是完整路径，如果点击提交表单它会朝这个url发起请求：

<form action="http://127.0.0.1:5000/get" method="get">

image-20210709201548134

如果你把他改为非完整路径，它会朝当前页面发起请求，注意观察下面与上述地址栏中的端口变化：

<form action="/get" method="get">

image-20210709201712925

method 提交方式

form表单中的method属性可设置表单提交时的HTTP请求方式。

有2种选项：

  • GET请求（form提交时的默认选择）
  • POST请求

它们的区别如下。

GET请求：

  1. 没有请求体
  2. 数据必须控制在1KB之内
  3. 请求的数据会暴露在地址栏中（?之后，以&进行分割）

POST请求：

  1. 有请求体
  2. 数据的大小没有上限
  3. 请求的数据不会暴露在地址栏中，因此相较于GET请求更加安全

以下行为将会触发GET请求：

  • 地址栏直接输入地址并访问
  • 点击页面a标签进行链接跳转
  • 默认的form表单提交方式
  • img的图像资源请求

说的更直白一点，GET请求不能上传文件，但是POST请求可以上传文件。

enctype 数据编码

form表单中的enctype属性可设置表单提交时对于提交数据的编码方式。

  • application/x-www-form-urlencoded：url编码格式，也是form表单默认的编码格式，它不允许上传文件，一般配合GET方式使用
  • multipart/form-data：不对字符进行编码，它允许上传文件，一般配合POST方式进行使用
  • text/plain：将空格转换为“+”号，但不对特殊字符进行编码

url编码格式的特点：

  • 将空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值

一言以蔽之，若想上传文件，则必须使用POST请求方式 + multipart/form-data的编码方式：

<form action="/post" method="post" enctype="multipart/form-data">

target 提交结果

form表单中的target属性可设置表单提交后会在哪里打开action的提交结果。

有以下5个值：

  • _blank：在新窗口中打开action的提交结果
  • _parent：在父窗口中打开action的提交结果
  • _self：在当前窗口中打开action的提交结果（默认值）
  • _top：在顶级窗口中打开action的提交结果
  • framename：在内联框架iframe中打开action的提交结果

这个属性其实很少用到，但是该属性可以搭配一些其他的技术做到文件上传的功能，因此这里例举一下，后面也会有所介绍。

示例如下，提交后将会在新的页面打开提交结果：

<form action="http://127.0.0.1:5000/post" method="post" enctype="multipart/form-data" target="_blank">

from表单提交目标

novalidate 取消验证

form表单中的novalidate属性可设置表单提交时不会验证填入数据的合法性。

有的input框可以设置为必填，如果一个必填的input框没有填入内容则在提交时浏览器将提示必须填写该字段，我们可以通过设定novalidate来取消这个验证功能。

如下是设置了提交验证的表单：

    <form action="#" >
        <div>
            <input type="text" required placeholder="Please enter content">
        </div>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>

当点击提交时浏览器会提示你填入该字段：

image-20210709204528674

如果为form表单加上了novalidate属性后，它将会直接提交，注意观察地址栏中的变化：

    <form action="#" novalidate>
        <div>
            <input type="text" required placeholder="Please enter content">
        </div>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>

点击提交后页面会刷新一次，这代表已经绕过验证成功提交了：

image-20210709204629241

input 输入框

基本介绍

input标签为表单输入框，它是一个内联块级标签。

input框有多种形态，只需要设置属性type的值即可，如下表所示：

属性值表现形式对应代码
text文本输入框<input type=text" />
password密码输入框<input type=“password” />
number数字输入框<input type=“number” />
date日期输入框<input type=“date” />>
checkbox复选框<input type=“checkbox” checked=“checked” />
radio单选框<input type=“radio” />
submit提交按钮<input type=“submit” value=“提交” />
reset重置按钮<input type=“reset” value=“重置” />
button普通按钮<input type=“button” value=“普通按钮” />
hidden隐藏输入框<input type=“hidden” />
file文件选择框<input type=“file” />
list数据列表栏<input type=“text” list=“lst” /> <datalist id=“lst”></datalist>

text 文本输入框

文本输入框可输入任何内容，它有2个最重要的属性name和value。

当form表单点击提交时，文本输入框会将输入的值赋值给value属性，并将name属性和value属性组成一组键值对提交给后端。

如果没有显式的设置value，那么这个文本输入框的内容是空的，当你输入内容后它会自动添加value属性并将所输入内容赋值给该属性：

<input type="text" name="username">

渲染结果：

image-20210709210618342

如果显式的设置了value，那么它就会作为默认值显示在文本输入框中：

<input type="text" name="username" value="username">

渲染结果：

image-20210709210731428

我们一般都不会这样做，而是利用placeholder属性来提示用户应该输入什么内容，placeholder属性在form表单提交时并不会被收集：

<input type="text" name="username" placeholder="please enter user name">

渲染结果：

image-20210709210847473

除此之外，你可以使用required属性来规定该输入框是必填项，前提是form表单验证已被打开它才会生效：

<input type="text" name="username" placeholder="please enter user name" required>

如果使用了readonly属性，则该输入框就会变为只读，它通常和value设置的默认值搭配使用：

<input type="text" name="username" placeholder="please enter user name" value="default value" readonly>

渲染结果：

image-20210710141004585

你也可以使用disabled禁止该输入框，用户只能看到灰色被禁用的输入框，不能进行内容输入：

<input type="text" name="username" placeholder="please enter user name" disabled>

渲染结果：

image-20210709211113100

password 密码输入框

密码输入框和文本输入框差不多，不同的是输入内容时浏览器会用黑色实心圆遮蔽掉用户键入的内容：

<input type="password" name="pwd">

渲染结果：

image-20210709211253430

其他的属性和文本输入框通用。

number 数字输入框

数字输入框仅能够输入数字，不能输入其他的字符，可用于输入手机号：

<input type="number" name="phone">

image-20210709211517186

其他的属性和文本输入框通用。

date 日期输入框

日期输入框可以上传一个年月日。

  • 当input的type为datetime-local时，可以上传一份本地化的时间（年月日时分秒）
  • 当input的type为date时，可以上传一份标准化的世界时间（年月日）
  • 当input的type为month时，可以上传年份和月份
  • 当input的type为time时，可以上传小时和分钟数
  • 当input的type为week时，可以上传年份和周数

除此之外，你可以利用min属性设置开始时间，max属性设置结束时间，step属性设置步长即多少时间一个间隔：

如下所示：

    <form action="#" novalidate>
        <div>
            <input type="datetime-local" name="local_time">
            <input type="date" name="world_time">
            <input type="month" name="year_month_time">
            <input type="time" name="hour_minute_time">
            <input type="week" name="year_week_time">
        </div>
    </form>

渲染结果：

image-20210709212243122

checkbox 复选框

复选框常用于勾选兴趣爱好，一般来说都要具有多个。

像这种复选框或者单选框之类的，都应该显式的设置value，不然提交的数据则为空。

注意，一组复选框内的name应该都相同，而value则应该不同，如下所示：

    <form action="http://127.0.0.1:5000/get" >
        <div>basketball:<input type="checkbox" name="hobby" value="basketball"></div>
        <div>football:<input type="checkbox" name="hobby" value="football"></div>
        <div>volleyball:<input type="checkbox" name="hobby" value="volleyball"></div>
    </form>

渲染结果：

image-20210709212532630

当点击提交后，它会以列表的方式将所勾选的checkbox的value进行整合，类似于下面这种格式：

{
    "hobby" : ["basketball", "football"]
}

此外，如果你想让某个复选框设置为默认的，可为它添加checked属性即可：

<div>basketball:<input type="checkbox" name="hobby" value="basketball" checked></div>

这样在渲染页面时，该复选框就会被选中：

image-20210709222309427

在某些特殊的情况下我们只会设置一个复选框，如用户必须点击已阅读协议后才能进行下一步操作，此时你可以将该复选框设置为required，即必填，然后搭配Js做到这样的效果，这里不再例举。

radio 单选框

单选框的使用与复选框基本相同。

必须显式的设置value，且name要一致：

    <form action="http://127.0.0.1:5000/get">
        <div>
            male: <input type="radio" name="gender" value="male">
            female: <input type="radio" name="gender" value="female">
        </div>
        <button type="submit">提交</button>
    </form>

渲染结果：

image-20210709222838977

此外，如果想设置默认值，则在radio上加上checked属性即可。

如果想设置多个radio中必须至少选择一个，则在任意一个同组的radio上添加属性required即可。

submit 提交按钮

input的type设置为submit后，可用于提交表单的内容，你可以为其设置value属性值来指定按钮显示内容：

<input type="submit" value="submit button">

当点击该按钮后，form表单将发送数据至后端。

渲染结果：

image-20210709223058012

reset 重置按钮

input的type设置为reset后，可用于清空表单的内容，你可以为其设置value属性值来指定按钮显示内容：

<input type="reset" value="reset button">

当点击该按钮后，form表单中所有以填项都会被清空。

渲染结果：

image-20210710135950614

button 普通按钮

input的type设置为button后，可用于与JavaScript代码进行交互，你可以为其设置value属性值来指定按钮显示内容：

<!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>Document</title>
</head>

<body>
    <input type="button" value="ordinary button">
</body>
<script>
    "use strict";
    document.querySelector("input[type=button]").addEventListener("click", () => {
        console.log("click in button")
    })

</script>

</html>

为该按钮绑定Js事件，点击按钮后将触发Js事件。

渲染结果：

image-20210710054851663

hidden 隐藏输入框

隐藏输入框可用于存储一些用户不可见的数据，如用户的ID号等信息，这在修改用户密码时很常用。

在进行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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/get" method="get">
        <input type="hidden" name="user-id" value="31926">
        <div>old password : <input type="password" placeholder="please enter user old password" name="old_password"></div>
        <div>new password : <input type="password" placeholder="please enter user new password" name="new_password"></div>
        <div><button type="submit">submit button</button></div>
    </form>
</body>

</html>

提交后的结果：

ImmutableMultiDict([('user-id', '31926'), ('old_password', '123'), ('new_password', '456')])

file 文件选择框

当input的属性为file时，可用于上传文件。

注意，如想成功上传文件，则：

  • form表单的method必须为POST
  • form表单的enctype必须为multipart/form-dat

如下示例，需要注意文本选择框也必须设置name属性，否则将无法上传文件：

<!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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/post" method="post" enctype="multipart/form-data">
        <div>avatar : <input type="file" name="avatar"></div>
        <div><button type="submit">submit button</button></div>
    </form>
</body>

</html>

渲染结果如下：

image-20210710060432502

后端flask可用request.files进行文件接收，以下是接收内容：

ImmutableMultiDict([('avatar', <FileStorage: 'logo.ico' ('image/vnd.microsoft.icon')>)])

我们为文本选择框新增属性multiple，用于一次性上传多个文件：

<div>avatar : <input type="file" name="avatar" multiple></div>

image-20210710060313661

除此之外，我们也可以为文本框新增属性accept，用来指定允许上传文件的mime类型：

<div>avatar : <input type="file" name="avatar" accept="image/png, image/gif"></div>

这样在文件选择时，你只能选择png或者gif格式的图片了：

image-20210710060619811

datalist 数据列表

通过数据列表，我们可以展示一些信息供用户选择，它由3种标签构成分别是input、datalist、option。

input首先设置为文本输入框，然后添加属性list并给定一个关键字，此外你还需要设置name属性。

而后输入datalist标签，该标签的id和文本输入框的list关键字一致。

在datalist标签中嵌套option标签，并设置value值，这样数据列表就做好了：

<!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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/get" method="get">
        <div>
            city:
            <input type="text" list="city_list" name="city">
            <datalist id="city_list">
                <option value="Beijing">Beijing</option>
                <option value="Shanghai">Shanghai</option>
                <option value="Tianjin">Tianjin</option>
                <option value="Chongqing">Chongqing</option>
            </datalist>
            <button type="submit">submit button</button>
        </div>
    </form>
</body>

</html>

渲染结果：

image-20210710134632391

注意！数据列表中一次只能选定一个选项。

input的常见属性

下表中将例举input中常见的属性：

属性值描述
namefield_name表单提交时的键
valuetext表单提交时的值
placeholdertext输入提示
checkedcheckedradio和checkbox默认选中
readonlyreadonly只读
disableddisabled禁用
requiredrequired必填
sizenumber定义输入框显示宽度
minnumber定义输入的字段最小值
maxnumber定义输入的字段最大值
patternregexp对输入内容进行正则验证
oninvalidJavaScript当正则验证失败后运行的代码
autocompleteon 、off自动记录键入输入历史

以下是常用属性举例：

<!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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/get" method="get">
        <hr>
        <div>
            <!-- placeholder：输入提示，仅适用于输入框 -->
            <input type="password" name="password" placeholder="Please enter your password"> placeholder
        </div>
        <hr>
        <div>
            <!-- checked：适用于radio或者checkbox的默认选项 -->
            male: <input type="radio" name="gender" value="male" checked> female:  <input type="radio" name="gender" value="female" > checked
        </div>
        <hr>
        <div>
            <!-- readonly：只读，适用于和默认值进行搭配，输入框只读 -->
            <input type="text" name="user_desc" value="default value" readonly> readonly
        </div>
        <hr>
        <div>
            <!-- disabled：禁用输入，所有input标签都适用，输入框、按钮、选择框、数据列表等 -->
            <input type="text" name="user_type" value="vip" disabled> disabled
        </div>
        <hr>
        <div>
            <!-- required：必填项 -->
            <input type="text" name="user introduction" required> required
        </div>
        <hr>
        <div>
            <!-- size： 定义输入框显示宽度-->
            <input type="text" name="size_value" size="3"> size:3
        </div>
        <hr>
        <div>
            <!-- min：定义输入的字段最小值，也就是说输入的值必须大于min -->
            <input type="number" name="min_value" min="10"> min:10
        </div>
        <hr>
        <div>
            <!-- max：定义输入的字段最大值，也就是说输入的值必须小于max -->
            <input type="number" name="max_value" max="100"> max:100
        </div>
        <hr>
        <div>
            <!-- pattern和oninvalid搭配使用：pattern输入正则表达式、oninvalid输入匹配失败后的执行代码 -->
            <input type="text" name="email" pattern=".+@.+com" oninvalid="javascript:alert('regexp match email failed')"> email
        </div>
        <hr>
        <div>
            <!-- autocomplete：选择on、浏览器会记录此次输入的值，默认为on -->
            <input type="text" name="auto_complete" autocomplete="on">  autocomplete
        </div>
        <hr>
        <div>
            <button type="submit">submit button</button>
        </div>
    </form>
</body>

</html>

label 标签

基本介绍

label标签通常与input标签绑定使用，它将作为input标签的标注出现，它是一个块级标签。

label有一个特殊的属性，for，该属性的值应当与被绑定的input标签id值相同。

我们看一个简单的例子来理解label标签的作用，下面这个例子中是没有label标签的，当点击关键字“male”或者“female”时，浏览器不会自动聚焦到radio上：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
        <div>
            male: <input type="radio" name="gender" value="male">
            female: <input type="radio" name="gender" value="female">
        </div>
    </form>
</body>
</html>

渲染结果：

image-20210710143833074

如果使用label标签作为radio的标注，则点击label标签文本时，浏览器将会自动的聚焦在radio标签上：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
        <div>
            <label for="choice_male">male:</label>
            <input type="radio" name="gender" value="male" id="choice_male">
            <label for="choice_female">female:</label>
            <input type="radio" name="gender" value="female" id="choice_female">
        </div>
    </form>
</body>
</html>

image-20210710144303138

select 选择框

基本介绍

select标签与optgroup标签（可选）和option标签搭配可作出选择框的效果。

它类似于数据列表，但比数据列表更加强大，以下是这3个标签的可选常用属性。

首先是select标签，它最少要设定一个属性name，作为键与option的value进行搭配：

属性值描述
nametext规定发往服务器的选项键
multiplemultiple规定下拉列表是否可以多选
autofocusautofocus页面加载完成后文本区域自动获取焦点
disableddisabled禁用该下拉列表
requiredrequired规定文本区域是必填的
sizenumber规定下拉列表中可见选项的数目

其次是optgroup标签，这是一个可选标签，也就是说选择框的组成它并不是必须的：

属性值描述
labeltext为选项组规定描述
disableddisabled禁用该选项组

最后是option标签，它最少要设定一个属性value，作为值与select标签的name进行搭配：

属性值描述
valuetext规定发往服务器的选项值
labeltext定义当使用optgroup时所使用的标注
selectedselected规定默认选中的选项
disableddisabled规定此选项应当在首次加载时禁用

单项选择框

下面是一个单项选择框的示例：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
        <label for="choice_city">city:</label>
        <select name="city" id="choice_city">
            <optgroup label="China">
                <option value="Beijing">Beijing</option>
                <option value="Shanghai">Shanghai</option>
                <option value="Tianjin">Tianjin</option>
                <option value="Chongqing">Chongqing</option>
            </optgroup>
            <optgroup label="USA">
                <option value="NewYork">NewYork</option>
                <option value="SanFrancisco">SanFrancisco</option></option></option>
                <option value="LosAngeles">LosAngeles</option>
                <option value="Miami">Miami</option>
            </optgroup>
        </select>
        <div>
            <button type="submit">submit button</button>
        </div>
    </form>
</body>
</html>

渲染结果：

image-20210710150751180

多项选择框

如果为select标签新增multiple属性，则该选择框可变为多选：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
        <label for="choice_city">city:</label>
        <select name="city" id="choice_city" multiple>
            <optgroup label="China">
                <option value="Beijing">Beijing</option>
                <option value="Shanghai">Shanghai</option>
                <option value="Tianjin">Tianjin</option>
                <option value="Chongqing">Chongqing</option>
            </optgroup>
            <optgroup label="USA">
                <option value="NewYork">NewYork</option>
                <option value="SanFrancisco">SanFrancisco</option></option></option>
                <option value="LosAngeles">LosAngeles</option>
                <option value="Miami">Miami</option>
            </optgroup>
        </select>
        <div>
            <button type="submit">submit button</button>
        </div>
    </form>
</body>
</html>

渲染结果：

image-20210710150908315

默认选中

当option标签设置为selected后，该标签会被默认选中：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
        <label for="choice_city">city:</label>
        <select name="city" id="choice_city">
            <optgroup label="China">
                <option value="Beijing">Beijing</option>
                <option value="Shanghai">Shanghai</option>
                <option value="Tianjin">Tianjin</option>
                <option value="Chongqing">Chongqing</option>
            </optgroup>
            <optgroup label="USA">
                <option value="NewYork" selected>NewYork</option>
                <option value="SanFrancisco">SanFrancisco</option></option></option>
                <option value="LosAngeles">LosAngeles</option>
                <option value="Miami">Miami</option>
            </optgroup>
        </select>
        <div>
            <button type="submit">submit button</button>
        </div>
    </form>
</body>
</html>

渲染结果：

image-20210710154140014

textarea 文本域

textarea标签与文本输入框类似，但是能够输入更多的内容。

它是一个内联标签，以下是常用属性：

属性值描述
nametext规定发往服务器的选项键
autofocusautofocus规定在页面加载后文本区域自动获得焦点
maxlengthnumber规定该文本域所支持输入的最大字符数
placeholdertext规定描述文本区域预期值的简短提示
rowsnumber规定文本域的可见行数，即高度
colsnumber规定文本域的可见列数，即宽度
requiredrequired必填
readonlyreadonly只读
disableddisabled禁用

如下所示：

<!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>Document</title>
</head>
<body>
    <form action="http://127.0.0.1:5000/get">
       <textarea name="desc" id="" cols="80" rows="20" placeholder="this is textarea"></textarea>
       <div>
            <button type="submit">submit button</button>
       </div>
    </form>
</body>
</html>

渲染结果：

image-20210710151909258

fieldset - legend 美化标签

fieldset和legend标签都是块级标签，没什么特别明显的作用就是为了美化元素。

  • fieldset：为被包裹元素外加上一个框，主要为字段进行逻辑分组
  • legend：作为fieldset标签的标题出现

如下所示：

<!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>Document</title>
</head>

<body>
    <form action="http://127.0.0.1:5000/get">
        <fieldset>
            <legend>
                <h4>用户信息</h4>
            </legend>
            <label for="user_name">用户名:</label>
            <input type="text" name="name" id="user_name" placeholder="please enter user name" size="30" required>
            <label for="user_pwd">密码:</label>
            <input type="password" name="password" id="user_pwd" placeholder="please enter user name" size="30" required>
            <p></p>
            <fieldset>
                <legend>性别</legend>
                <label for="gender_male">male:</label>
                <input type="radio" name="gender" value="male" id="gender_male" required>
                <label for="gender_female">female:</label>
                <input type="radio" name="gender" value="female" id="gender_female">
            </fieldset>
        </fieldset>
        <p></p>
        <fieldset>
            <legend>其他信息</legend>
            <fieldset>
                <legend>爱好</legend>
                <label for="basketball">篮球</label>
                <input type="checkbox" name="hobby" id="basketball" value="basketball" checked>
                <label for="football">足球</label>
                <input type="checkbox" name="hobby" id="football" value="football">
                <label for="volleyball">排球</label>
                <input type="checkbox" name="hobby" id="volleyball" value="volleyball">
            </fieldset>
            <p></p>
            <fieldset>
                <legend>个人介绍</legend>
                <textarea name="user_desc" id="" cols="60" rows="10"
                    placeholder="Please enter your personal profile" required></textarea>
            </fieldset>
            <p></p>
            <fieldset>
                <legend>居住城市</legend>
                <select name="city" id="choice_city" required>
                    <optgroup label="China">
                        <option value="Beijing">北京</option>
                        <option value="Shanghai">上海</option>
                        <option value="Tianjin">天津</option>
                        <option value="Chongqing">重庆</option>
                    </optgroup>
                    <optgroup label="USA">
                        <option value="NewYork">纽约</option>
                        <option value="SanFrancisco">旧金山</option></option></option>
                        <option value="LosAngeles">洛杉矶</option>
                        <option value="Miami">迈阿密</option>
                    </optgroup>
                </select>
            </fieldset>
        </fieldset>
        <p></p>
        <fieldset>
            <button type="submit">提交</button>
            <input type="reset" value="重新填写">
        </fieldset>
    </form>
</body>

</html>

渲染结果：

image-20210710154507472

button 按钮

button标签是一个块级标签，它有一个非常重要的属性type，这个type可设置以下2个值：

  • submit：作用和<input type=“submit” />相同
  • button，作用和<input type=“button” />相同

相较于input的按钮，我更倾向于使用button，因为它的语义更加明确。

当然如果你想要reset，那么就只能使用input按钮了。

云崖先生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
150套html5各类精品网站模板系列.rar
08-07
这个"150套html5各类精品网站模板系列.rar"压缩包文件显然是一个集合，包含了多种不同风格和用途的HTML5网站模板。这些模板可以用于快速构建网页，减少从零开始设计和编码的工作量，对于设计师、开发者或者初学者来...
form 回车自动提交问题
shake863
04-08 200
今天遇到一个很变态的问题，由于一个input框要用suggest ，会用到回车事件。 但是在一个form里面，按回车的时候我的form自动提交了，我靠，怎么改动不行。 把submit改成button，也不行。蛋蛋的，看样子是自动执行了form.submit() 结果从网上得到某位大侠的文章，搞定，特立此文留念。原文如下： 我们有时候希望回车键敲在文本框（input element）里来提...
html-target属性
weixin_42076534的博客
06-15 1万+
html中target属性
HTML中的target标签的属性值
qq_36949892的博客
05-22 7007
HTML中的target标签的属性值 target标签有四种不同的属性值 //跳转到新的文档页面，也就是打开新的目标文档 <a target = "_blank"></a> //在当前页面进行跳转，是 a 标签的默认值 <a target = "_self"></a> // <a target = "_parent"></a&g...
HTML基础：超链接之target属性的4种值详解
u013179804的博客
03-17 3619
另外，对于 target 属性的使用注意事项包括：对于使用 _blank 打开的链接，应该在合适的场景下添加属性，以防止被打开的页面访问原页面的 window 对象，提高安全性。在使用 JavaScript 打开新窗口时，应当小心使用 target="_blank"，避免出现未经用户允许的弹出窗口，并确保提供良好的用户体验。好了，以上，本文完。作者介绍：云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️。
HTML学习笔记:链接target属性
最新发布
wz_1992的博客
04-18 617
链接target属性
CSS样式表单美化系列
04-29
一个标准的HTML表单通常由`<form>`标签开启，内含各种输入元素，如`<input>`、`<select>`、`<textarea>`，以及提交按钮`<button>`或`<input type="submit">`。这些元素可以通过`class`或`id`属性进行选择和定制样式...
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
09-02
在本文中，我们将关注 BootStrap 智能表单实战系列的第六部分，即表单编辑页面的数据绑定。这个功能主要用于编辑页面，帮助开发者将已有数据展示在表单中，方便用户进行修改。 数据绑定是Web应用中常用的一种技术，...
HTML5网页设计初窥系列课程PDF
10-11
这个“HTML5网页设计初窥系列课程”PDF讲义，很显然是针对初学者设计的一份学习资料，旨在帮助读者掌握HTML5的基本概念、语法和实际应用。 在HTML5中，一些旧的元素被废弃，同时引入了许多新的元素，以更好地表达...
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
09-02
`<form>`标签包含了`form-horizontal`类，这使得表单控件和其标签并排显示，提供更清晰的布局。通过`$(function () {...})`定义的jQuery函数，我们可以动态地向表单中添加元素，如`text`、`radio`、`checkbox`等。 ...
【html】a标签的五个target属性值
zhangankang的博客
08-05 4297
HTML5不再支持使用frame，iframe只有src 属性 <a> 标签的 target 属性规定在何处打开链接文档。 <a href="/aaa.html" target="[属性值]">aaa</a> target="view_window"：用于多个链接去同一个新页面中打开；打开一个新页面，所有使用这个属性值的链接在新页面中替换方式显示； target="_blank"：用于每个链接在不同新空白页面中打开，互不影响； target="_self"：用于在.
前端基础 （day1）HTML
weixin_52545652的博客
05-20 175
记录前端学习的笔记
HTML中属于target属性有,HTML的target属性
weixin_42355865的博客
06-04 3220
HTML的target属性时间：2017-10-2元素的target属性用于指定在何处打开链接文档,如果在一个a标签内包含一个target属性,浏览器将会载入和显示用这个标签的href属性命名的,名称与这个目标吻合的框架或者窗口中的文档,如果这个指定名称和id的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入这个窗口,从此以后,超链接文档就可以指向这个新的...
tablueau地图标记圆形_html中的<a>标签的target是做什么用的
weixin_39668199的博客
12-20 192
展开全部 标签的 target 属性规定在何处打开链接32313133353236313431303231363533e78988e69d8331333366306464文档。如果在一个 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给...
HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值
热门推荐
BOKEhhh的博客
04-05 2万+
本文记录了对HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值的效果的测试。 使用<frame>标签，做一个有框架的网页，为了能看出HTML中<a>标签的target属性的“_self”和“_parent”这2个属性值的不同效果，需要这个网页还有框架的嵌套，框架思路如下图所示： 该...
html中的留言框怎么写,怎么用html做一个显示留言板的框 留言成功马上显示 和留言板一样...
weixin_33172728的博客
05-30 3828
1.数据库先载入表单，里面包含留言信息名为text(名字自己起)，还要有一个num号，设置为不可重复，这是数据库要先准备的，因为留言需要存储，必须有一个可以存储的地方，光是html是不能完成的，所以需要掌握html、php、以及简单sql数据库增删查找操作。2.需要一个连接数据库的Link.php文件header("Content-Type:text/html;charset=utf-8"); ...
html target属性详解（如何分窗口，frame、target、base、hr）
Code-lover's Learning Notes
10-19 1万+
A的target属性 　　介绍A标签的另一个重要的属性——target。 例子 target=_blank href=/cgi-bin/mybbs/>myBBS 显示 myBBS 说明 　　这个连接和一般的连接看起来没有任何区别，只是点这个连接时， 浏览器将打开一个新的窗口显示myBBS。target可能的值还有： _blank 开一个新窗口
YDOOK : HTML ＜a＞ 标签的 target 属性 跳转新窗口属性设置
YDOOK
07-29 5440
<a href=“超链接 URL 地址” target=“target 选项”>a 连接文字标识 </a> <a><\a>target 选项 及 作用： 1. _blank 在新的、未命名的窗口中打开链接页面； 2. _self 在当前的浏览窗口中打开链接页面； 3. _parent 链接页面文档载入父窗口或者包含来超链接引用的框架的框...
HTML <a> 标签的 target 属性
美奇软件开发工作室
03-02 770
target属性值 值 描述 _blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 frame标签的name属性值 在指定的frame区域中打开被链接文档。 ...
mxgraph 插入HTML5表单控件
06-09
mxGraph支持在标签中插入HTML5表单控件，例如文本框、下拉列表、按钮等。以下是一个例子，演示如何在mxGraph中插入HTML5表单控件： ```javascript // 创建一个矩形对象 var cell = new mxCell('', new mxGeometry(0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值