Web入门----表单元素

最新推荐文章于 2023-04-28 00:03:48 发布

会写代码的哈士奇

最新推荐文章于 2023-04-28 00:03:48 发布

阅读量787

点赞数

分类专栏：前端文章标签： web input html css 入门

本文链接：https://blog.csdn.net/yuguqinglei/article/details/99829674

版权

基本表单元素

一个基本的表单只需要三个元素，form,input,button元素。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        form {
       
            width: 1000px;
            height: 500px;
            margin: 10px auto;
            border: 1px double red;
            border-style: double;
        }

        div {
       
            font: normal 28px/34px "Microsoft Yahei";
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div>表单</div>
    <form>
        <input name="inputdata">
        <button>Submit</button>
    </form>
</body>

</html>
form
action

action属性的配置代表要将表单数据发送到什么地址.

如果form元素不设置表单该属性，那么浏览器会将表单数据发送到以加载该HTML文档的URL。

如果action设置的是相对属性，那么该值会被嫁接到当前页的URL的后面。如果在当前的HTML网页中配置了base，则嫁接刀该元素的href属性后面。

method

method代表的是表单数据发送到服务器的HTTP方法。允许的值有POST和GET。分别对应HTTP的get请求与post请求。具体需要配置什么参数，需要由服务器给出的接口决定。

enctype

enctype属性指定了浏览器对发送给服务器的数据采用的编码方式。允许的参数如下

值说明

application/x-www.form-urlencoded 默认编码方式，这种编码方式不能进行文件上传

multipart/form-data 多类型，支持文件和多类型的参数的上传

text/plain 浏览器差异

autoComplete
让浏览器记住用户输入表单的数据，并且在再次遇到类似的表单的时候自动使用这些数据帮用户填写。
<input autocomplete = 'off/on'/>
target

target用户指定表单反馈信息的目标显示位置。它跟<a>元素中的target非常相似。

值说明

_blank 显示在新窗口

_parent 显示父窗框组件中

_self 默认方式，显示在当前窗口中

_top 显示在最上层串口中

显示在指定的frame中

name
name属性可以用来为表单设置一个独一无二的标识符，以便使用DOM时，区分各个表单。需要注意的是：name属性与全局属性id不是一回事。id针对的对象是CSS选择器。
<input name='name'/>
label

lable元素存在的意义就是为表单元素提供说明与提示信息。
for
for属性表示该label元素是为哪个表单元素提供说明。for内容应该是表单元素的唯一标识符name属性的值。
<body>
    <div>表单</div>
    <form action="http://www.google.com/form" method="POST">
        <div class="center">
            <label>姓名:<input name="name" placeholder="请输入姓名" /></label>
        </div>


    </form>
</body> 
input
autofocus
autofocus用于让表单一出现的时候就聚焦于该input元素。
<body>
    <div>表单</div>
    <form action="http://www.google.com/form" method="POST">
        <div class="center">
            <p><label for="name">姓名:<input name="name" placeholder="请输入姓名" autofocus /></label></p>
            <p><label for="password">密码:<input name="password" placeholder="请输入密码" /></label></p>
        </div>
    </form>
</body>
disabled
禁用表单元素
<body>
    <div>表单</div>
    <form action="http://www.google.com/form" method="POST">
        <div class="center">
            <p><label for="name">姓名:<input name="name" placeholder="请输入姓名" autofocus /></label></p>
            <p><label for="password">密码:<input name="password" placeholder="请输入密码" disabled /></label></p>
        </div>
    </form>
</body>
fieldset

legend
fieldset元素用于给复杂的表单元素分类。而legend元素则是给分组做简易的说明。
<body>
    <div>表单</div>
    <form action="http://www.google.com/form" method="POST">
        <div class="center">
            <fieldset>
                <legend>WIFI设置</legend>
                <p><label>SSID<input name="wifi_name" placeholder="请输入wifi名称" /></label></p>
                <p><label>密 码<input name="wifi_password" placeholder="请衰弱wifi密码" /></label></p>
                <p><input type="button" name="wifi_submit" value="修改"></p>

            </fieldset>

            <fieldset>
                <legend>局域网设置</legend>
                <p><label>&nbsp;I&nbsp;&nbsp;P&nbsp;地址<input name="ethernet_ip" placeholder="请输入局域网地址" /></label> </p>
                <p><label>子网掩码<input name="ethernet_mask" placeholder="请输入局域网掩码" /></label> </p>
                <p><label>默认网关<input name="ethernet_gateway" placeholder="请输入局域网网关" /></label> </p>
                <p><label>&nbsp;&nbsp;D&nbsp;N&nbsp;S&nbsp;&nbsp;<input name="ethernet_dns"
                            placeholder="请输入局域网DNS" /></label> </p>
                <p><input type="button" name="wifi_submit" value="修改"></p>
            </fieldset>
        </div>
    </form>
</body>
button

如果将button的type设置为submit,则在按下该按钮后会提交包含它的表单。并且，这是button元素的默认行为。下面的属性作为form元素属性的覆盖或者补充。

type

默认属性为submit,决定按钮的功能；

form

指定关联表单；

formaction

指定表单提交的地址；

formenctype

指定表单数据的编码方式。

formmethod

指定表单提交数据到服务器中的HTTP访问方式

formtarget

指定表单数据提交后，返回信息的处理方式。

formovalidate

指定表单是否执行表单数据有效性检查

select

optgroup
<body>
    <div

值	说明
application/x-www.form-urlencoded	默认编码方式，这种编码方式不能进行文件上传
multipart/form-data	多类型，支持文件和多类型的参数的上传
text/plain	浏览器差异

值	说明
_blank	显示在新窗口
_parent	显示父窗框组件中
_self	默认方式，显示在当前窗口中
_top	显示在最上层串口中
	显示在指定的frame中

最低0.47元/天解锁文章

会写代码的哈士奇

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web入门----表单元素

基本表单元素一个基本的表单只需要三个元素，form,input,button元素。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录