36.html5的表单（form）

最新推荐文章于 2021-10-27 20:36:16 发布

Keeling1720

最新推荐文章于 2021-10-27 20:36:16 发布

阅读量367

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/116369324

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

文章目录

html5的表单（form）

html5的表单（form）

主要用于将本地的数据提交给远程的服务器

表单的简介（form）

from的属性：

action：表单要提交的服务器的地址

表单项：

文本框 <input type = “text” name=“what1”>（数据要提交到服务器，必须指定name属性值）
密码框 <input type = “password” name=“what2”>（数据要提交到服务器，必须指定name属性值）
提交按钮 <input type = “submit” value=“跳转”>（value值可以省略不写，默认为提交，用于设置按钮的文本）
单选按钮 <input type = “radio” name=“区别是不是同一个radio组的名字” value=“传递给服务器的数据” checked（有checked的话，那这个radio就会被默认选中）>
多选按钮 <input type=“checkbox” name=“区别是不是同一个checkbox组的名字” value=“传递给服务器的数据” checked（有checked的话，那这个radio就会被默认选中）>
下拉列表 (用select指定下拉列表，每个项用一个option编写)
- <select name=“传递给服务器的what3”>
- <option value=“item1”>北京</option>
- <option value=“item2” selected（默认选中）>上海</option>
- <option value=“item3”>广州</option>
- <option value=“item4">深圳</option>
- </select>

这里演示一下，首先写一个假的服务器，在文件的当前目录下写一个02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>假装是服务器</title>
</head>
<body>
    <h1>欢迎登陆服务器！！！</h1>
</body>
</html>

然后模拟一下登陆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
	<!--点击按钮跳转到02.html-->
    <form action="02.html">
        <label>账号：</label>
        <!--账号文本框-->
        <input type="text" name="username">
        <br><br>
        <label>密码：</label>
        <!--密码文本框，输入后会用小黑点指代输入内容-->
        <input type="password" name="password">
        <br><br>
        <!--提交按钮-->
        <input type="submit">
    </form>
</body>
</html>

显示如下：
在这里插入图片描述
在账号中输入asd，密码输入123，（账号密码可以随便输入，甚至不输入）显示如下：

然后我们点击提交，就可以跳转到02.html了：

这里我们可以看到，02.html后边打了个问号，然后就是我们刚才给input设置的name值和我们输入的值的信息，这是因为我们把信息传递过去了。

同理，我们把以上说到的所有标签都用一遍，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="02.html">
    	<!--文本框例子-->
        <label>账号：</label>
        <input type="text" name="username">
        <br><br>
        
        <!--密码框例子-->
        <label>密码：</label>
        <input type="password" name="password">
        <br><br>
        
        <!--radio例子-->
        <div>性别：</div>
        <label>男</label>
        <input type="radio" name="gender" value="male" checked>
        <label>女</label>
        <input type="radio" name="gender" value="female">
        <br><br>
        
        <!--checkbox例子-->
        <div>技能:</div>
        <label>HTML</label>
        <input type="checkbox" name="skill" value="html" checked>
        <label>CSS</label>
        <input type="checkbox" name="skill" value="css">
        <label>JavaScript</label>
        <input type="checkbox" name="skill" value="javascript">
        <label>Node.js</label>
        <input type="checkbox" name="skill" value="node.js">

        <br><br>
        <!--下拉列表（select）例子-->
        <select name="address">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州" selected>广州</option>
            <option value="深圳">深圳</option>
        </select>
        <br><br>
        <!--提交按钮例子-->
        <input type="submit">
    </form>
</body>
</html>

显示：
在这里插入图片描述
对该页面进行以下操作后，点击提交：

“服务器”收到的数据如下：
username=asd&password=123&gender=male&skill=html&skill=css&skill=javascript&address=北京

表单项补充

普通按钮：（value值要指定，否则按钮内没有内容，常结合js使用）
<input type = “button” value=“what按钮”>
重置按钮：(用于将表单的所有信息重置)
<input type = “reset”>
当然，我们用input觉得别扭的话，也可以直接用<button>标签，这种用法也会更常用，因为他更加灵活，你甚至可以在里面用图片当你的按钮。
button的定义：
<button type=“submit”>提交</button>
<button type=“button”>确定</button>
<button type=“reset”>重置</button>
调色板(兼容性不太好，IE用不了)
<input type=“color”>

让input的文本框不要记住输入过的信息

对于text文本框，他默认会有记忆功能，如果要取消的话，那么只需要在里面设置属性autocomplete=“off”(默认情况是on)，比如：

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

让表单项不能被修改

使用属性disable或者readonly，
区别：
disable数据不会提交
readonly数据会提交
例子如下：

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

显示：（红色字体是我截图后自己加的）
在这里插入图片描述

Keeling1720

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
36.html5的表单（form）

文章目录html5的表单（form）表单的简介（form）表单项补充让input的文本框不要记住输入过的信息让表单项不能被修改html5的表单（form）主要用于将本地的数据提交给远程的服务器表单的简介（form）from的属性：action：表单要提交的服务器的地址表单项：文本框 <input type = “text” name=“what1”>（数据要提交到服务器，必须指定name属性值）密码框 <input type = “password” name=“wh
复制链接

扫一扫

专栏目录