「前端开发」html入门表单与属性

ice_moss 的个人博客 / 24 / 0 / 创建于 1年前 / 更新于 1年前

[toc]

表单的创建

表单是什么

表单是用来采集信息，比如我们的登录、注册、发表评论、购买商品等等，都需要使用表单来提交信息然后给到后台服务器。

表单标签`<form></form>`

action属性

表示提交表单的地址

method属性

提交表单的http方法

 <form action="save.php" method="post"></form>

基本控件

单行文本框

type属性

指该输入款输入的类型

text：文本

file：文件

image：图片

……

<input type="text">

value属性

表示输入框已经填好的值

<input type="text" value="123456">

placeholder属性

表示文本框中提示的内容

<input type="text" placeholder="请输入密码">

disabled属性

将文本框锁死，意思就是不能向输入框中写入信息

 <input type="text" value="123456" disabled>

实例

<!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>
        <div>
            <form action="save.php" method="post">
                <p>用户名：<input type="text" value="admin"></p>
                <p>密码：<input type="text" placeholder="请输入密码"></p>
                <p>国籍：<input type="text" value="中国" disabled></p>  
            </form>
        </div>
    </body>
</html>

单选框radio

radio在输入框中表现为按钮选择样式

value：为选择当期按钮后，提交的值

name：多个当radio类型的输入框的name的值相同时，对应的输入框值按钮选择形成互斥关系

<input type="radio" name="sex" 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>
        <div>
            <form action="save.php" method="post">
                <p>用户名：<input type="text" value="admin"></p>
                <p>密码：<input type="text" placeholder="请输入密码"></p>
                <p>国籍：<input type="text" value="中国" disabled></p>

                  <!-- 注意：这里性别和学历是不同的类别，name值不能相同，不然同样会出现互斥关系 -->
                <p>性别：
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </p>
                <p>学历：
                    <input type="radio" name="degree" value="小学">小学
                    <input type="radio" name="degree" value="初中">初中
                    <input type="radio" name="degree" value="高中">高中
                    <input type="radio" name="degree" value="专科">专科
                    <input type="radio" name="degree" value="本科">本科
                    <input type="radio" name="degree" value="研究生">研究生
                </p>

            </form>
        </div>
    </body>
</html>

有一种情况：当我们点击男，或者本科学历等这些文本时，网页不会给我们选择输入框按钮，那么如何将点击范围扩大到文本上呢？答案是：<label></label>标签。

`<label></label>`

<!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>
        <div>
            <form action="save.php" method="post">
                <p>用户名：<input type="text" value="admin"></p>
                <p>密码：<input type="text" placeholder="请输入密码"></p>
                <p>国籍：<input type="text" value="中国" disabled></p>

                <p>性别：
                    <label>
                        <input type="radio" name="sex" value="男">男
                    </label>
                    <label>
                        <input type="radio" name="sex" value="女">女
                    </label>
                </p>      
            </form>
        </div>
    </body>
</html>

复选框checkbox

复选框表示可以选择多个

<input type="checkbox" name="hobby" 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>
        <div>
            <form action="save.php" method="post">
                <p>用户名：<input type="text" value="admin"></p>
                <p>密码：<input type="text" placeholder="请输入密码"></p>
                <p>国籍：<input type="text" value="中国" disabled></p>
                <p>爱好：
                    <label>
                        <input type="checkbox" name="hobby" value="篮球">篮球
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="足球">足球
                    </label>
                    <label>
                        <input type="checkbox" name="hobby" value="打游戏">打游戏
                    </label>
                </p>
            </form>
        </div>
    </body>
</html>

密码框

当前输入框内容会被隐藏为小圆点

<input type="password" placeholder="请输入密码">

实例

<!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>
        <div>
            <form action="http://127.0.0.1:8080/user/login" method="post">
                <p>用户名：
                    <input type="text" placeholder="请输入用户名">
                </p>
                <P>密码：
                    <input type="password" placeholder="请输入密码">
                </P>
                <p>验证码：
                    <input type="text" value="4820" disabled>
                </p>
            </form>
            </p>
        </div>
    </body>
</html>

下拉框

下拉菜单

<select>
       <option value="Alipay">支付宝</option>
       ……
           ……
</select>

实例

<!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>
        <div>
            <form action="http://127.0.0.1:8080/user/pay" method="post">
                <p>支付方式：
                    <select>
                        <option value="Alipay">支付宝</option>
                        <option value="Wachatpay">微信</option>
                        <option value="UnionPay">银联</option>
                    </select>
                </p>
            </form>
            </p>
        </div>
    </body>
</html>

多行文本框

多行文本框可以用来做留言、评论等

cols属性

指例数(宽度)

rows属性

指行数(高度)

<textarea cols="70" rows="30"></textarea>

实例

<!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>
        <div>
            <form action="http://127.0.0.1:8080/user/login" method="post"> 
                <p>留言：
                    <textarea cols="70" rows="30"></textarea>
                </p>
            </form>
            </p>
        </div>
    </body>
</html>

三种按钮

type属性值	按钮种类
button	按钮，可以写成`<button></button>`
submit	提交按钮,将form标签中的输入框的内容进行向url提交
reset	重置按钮，将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>
        <div>
            <form action="http://127.0.0.1:8080/user/login" method="post">
                <p>用户名：
                    <input type="text" placeholder="请输入用户名">
                </p>
                <P>密码：
                    <input type="password" placeholder="请输入密码">
                </P>
                <p>验证码：
                    <input type="text" value="4820" disabled>
                </p>
                <p>普通按钮：
                    <input type="button" value="每日打卡">
                </p>

                <p>提交按钮：
                    <input type="submit" value="点击提交">
                </p>

                <p>重置按钮：
                    <input type="reset" value="点击重置">
                </p>
            </form>
            </p>
        </div>
    </body>
</html>

智能感应`<datalist></datalist>`

该标签和<input>绑定起来使用

实例

<!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>
        <div>
            <form action="http://127.0.0.1:8080/user/login" method="post">
                <p>省份：
                    <input type="text" list="province-list">
                    <datalist id="province-list">
                        <option value="山西"></option>
                        <option value="山东"></option>
                        <option value="河南"></option>
                        <option value="河北"></option>
                        <option value="湖南"></option>
                        <option value="湖北"></option>
                        <option value="广西"></option>
                        <option value="广东"></option>
                    </datalist>
                </p>
            </form>
            </p>
        </div>
    </body>
</html>

前端 html

本作品采用《CC 协议》，转载必须注明作者和本文链接

刻意学习

ice_moss

课程读者 589 声望

大四在读，好好学习，天天向上！

0 人点赞

「前端开发」html入门表单与属性

表单的创建

表单是什么

表单标签`<form></form>`

action属性

method属性

基本控件

单行文本框

type属性

value属性

placeholder属性

disabled属性

实例

单选框radio

实例：

`<label></label>`

复选框checkbox

实例：

密码框

实例

下拉框

实例

多行文本框

cols属性

rows属性

实例

三种按钮

实例

更多输入框

智能感应`<datalist></datalist>`

实例

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

「前端开发」html入门表单与属性

表单的创建

表单是什么

表单标签<form></form>

action属性

method属性

基本控件

单行文本框

type属性

value属性

placeholder属性

disabled属性

实例

单选框radio

实例：

<label></label>

复选框checkbox

实例：

密码框

实例

下拉框

实例

多行文本框

cols属性

rows属性

实例

三种按钮

实例

更多输入框

智能感应<datalist></datalist>

实例

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

表单标签`<form></form>`

`<label></label>`

智能感应`<datalist></datalist>`