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

[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>

更多输入框#

<!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/test" method="post">
                <p>颜色选择控件:
                    <input type="color" >
                </p>
                <p>日期选择控件:
                    <input type="date">
                </p>
                <p>时间选择控件:
                    <input type="time">
                </p>

                <!-- 点击提交时会验证该输入是否符合邮件命名规则 -->
                <P>电子邮件选择控件:
                    <input type="email">
                </P>

                <!-- 点击提交时会验证此输入框是否有输入 -->
                <p>必填项:
                    <input type="text" required>
                </p>
                <p>数字范围:
                    <input type="number" min="0" max="120">
                </p>
                <p>拖拽条:
                    <input type="range" min="10" max="100">
                </p>
                <p>搜索框:
                    <input type="search">
                </p>

                <!-- 点击提交时会验证此输入的url是否合法 -->
                <p>网址:
                    <input type="url">
                </p>
                <p>提交按钮:
                    <input type="submit" 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>
本作品采用《CC 协议》,转载必须注明作者和本文链接
刻意学习
未填写
文章
124
粉丝
107
喜欢
195
收藏
282
排名:335
访问:2.8 万
私信
所有博文
社区赞助商