HTML学习-表单

表单

<!--表单form-->
<form action="1.我的第一个网页.html" method="post">
	<p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
    
</form>

文本输入框

<!--文本输入框-->
<!--    maxlength:限制最长能写的字符
        size:文本框的长度-->
    <p>名字:<input type="text" name="username" value="11234" maxlength="8" size="30"></p>
    <p>密码:<input type="password" name=""pwd></p>

单选框标签

<!--    单选框标签
        radio
        value：单选框的初始值
        name：表示组
-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框标签

<!--    多选框
    checkbox
-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

按钮

<!--    按钮
    button:普通按钮
    image:图像按钮
    submit:提交按钮
    reset:重置按钮
-->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resources/image/mmexport1565261735921.jpg.JPG">
    </p>

下拉框、列表框

<!--    下拉框，列表框
-->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="US">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>

文本域

<!--    文本域

-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

文件域

<!--    文件域
    file
-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

邮箱验证

<!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>

URL

<!--    URL-->
    <p>URL:
        <input type="url" name="url">
    </p>

数字

<!--    数字-->
    <p>数字：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

滑块

<!--    滑块
    input type="range"
-->
    <p>滑块：
        <input type="range" max="100" min="0" step="2">
    </p>

搜索框

<!--    搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

表单的应用

隐藏域

• hidden

只读

• readonly

禁用

• disabled

表单的验证

提示信息

• placeholder

<p>名字:<input type="text" name="username" value="11234" maxlength="8" size="30" placeholder="请输入用户名" required></p>

非空判断

• required

<p>名字:<input type="text" name="username" value="11234" maxlength="8" size="30" placeholder="请输入用户名" required></p>

正则表达式

• pattern

<!--    自定义邮箱：-->
    <p>
        <input type="text" name="diymail" pattern="">
    </p>