表单 - 阿霖找BUG

表单

input type="..."

文本框：text

密码框：password

单选框：radio

多选框：checkbox

按键：button

邮箱：email

网址：url

滑条（数字）：number

滑块：range

搜索框：search

提交：submit

重置：reset

。。。

下拉框：select

文本框（大）：textarea

。。。

隐藏域：hidden

只读：readonly

禁用：disabled

。。。

表单验证：（初级）

提示信息：placholder

非空判断：required

正则表达式：pattern（可以去网上查找）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单form
action：表单提交的位置；可以是网站，也可以是一个请求处理地址
method：get：我们可以在url中看到我们提交的信息；不安全，高效
        post：相对安全，可以传输大文件
-->
<!--
type：指定元素类型，一般表格有的类型都有
name：表单元素的名字
value：初始值
size：元素的宽度
maxlength：最大字符数
checked：type为radio或者checkbox时，指定按钮是否被选中
-->
<form action="图像标签.html"method="post">
<!--    文本框：input type="text"-->
    <p>名字：<input type="text"name="username"size="30"placeholder="请输入密码"></p>
<!--    密码框：input type="password"-->
    <p>密码：<input type="password"name="pwd"minlength="6"hidden value="123456"></p>
    <p>
        性别：
        <input type="radio"value="boy"name="sex">男
        <input type="radio"value="gril"name="sex">女
    </p>
    <p>
        爱好：
        <input type="checkbox"value="sleep"name="hobby">睡觉
        <input type="checkbox"value="gril"name="hobby">女
        <input type="checkbox"value="student"name="hobby">学习
    </p>
<!--    
下拉框；列表框
-->
    <p>
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="US">美国</option>
            <option value="UK">加拿大</option>
            <option value="R">日本</option>
        </select>
    </p>
    
<!--    
文本框
-->
    <p>反馈：
        <textarea name="textarea"cols="30" rows="10" ></textarea>
    </p>
<!--
button：普通按钮
image：图片
submit：提交
reset：重置
-->
    <p>按钮：
        <input type="button"name="btn1"value="点击">
        <input type="image"src="../resources/image/1.jpg"width="60px"height="60px"disabled>
    </p>
    <!--    邮箱验证-->
    <p>邮箱：
        <input type="email"name="email">
    </p>
    <!--    URL-->
    <P>URL：
        <input type="url"name="URL"readonly>
    </P>
    <!--    数字-->
    <p>商品数量：
        <input type="number"name="number"min="0"max="100"step="2">
    </p>
    <!--    滑块：-->
    <p>
        音量：
        <input type="range"name="voice"min="0"max="100"step="10">
    </p>
    <!--    搜索框-->
    <p>
        搜索：
        <input type="search"name="search">
    </p>
    <p>
        diy邮箱：
        <input type="text"name="diyemail" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>


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

posted on 2022-07-08 00:58 阿霖找BUG 阅读(36) 评论(0) 收藏举报