「前端开发」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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!