学习HTML制作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post,get  提交方式
get方式可以在url中看到账号密码，提交不安全，但是高效
post提交相对安全，可以提交大文件
-->
<!--<form action="HTML.html" method="get">-->
<!--<form action="" method="post">
    &lt;!&ndash;文本输入框：input type="text"&ndash;&gt;
    <p>名字: <input type="text" name="username"> </p>
    &lt;!&ndash;密码框：input type="password"&ndash;&gt;
    <p>密码: <input type="password" name="pwd"> </p>

    <p>
        <input type="submit">&lt;!&ndash;提交&ndash;&gt;
        <input type="reset">&lt;!&ndash;重置&ndash;&gt;
    </p>
 value="请输入名字":默认初始值
  maxlength="4" ：最多能输入多少个字符
  size="10"：文本框长度
</form>-->

<form action="test.html" method="get">

    <!--文本输入框：input type="text"，hidden:隐藏-->
    <p>名字: <input type="text" name="username" hidden> </p>

    <!--表单初级验证1.placeholder：提示信息   2.required:不能为空-->
    <p>账号：<input type="text" name="id" placeholder="请输入数字账号" required></p>

    <!--密码框：input type="password"，readonly：只能读不能写-->
    <p>密码: <input type="password" name="pwd" value="现在只能读不能写" readonly></p>

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

    <!--
    input type="checkbox":多选框标签
    checked:默认选中
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="like" checked >睡觉
        <input type="checkbox" value="sing" name="like" >唱歌
        <input type="checkbox" value="playGames" name="like" >打游戏
    </p>



    <!--input type="button"：普通按钮
        input type="image"：图片按钮(点击提交到表单提交的位置)
    -->
    <p>按钮：
        <input type="button" name="dd" value="点击这里">
        <input type="image"  src="../img\0e275a4acf15273bab2eb6db2939a300_482x264.jpg" width="100px" height="50px" >
    </p>
    
    <!--1.下拉框，列表框:select      2.selected:默认选中-->
<p>国家：
    <select name="列表名称" >
        <option value="china" >中国</option>
        <option value="india">印度</option>
        <option value="usa" selected>美国</option>
    </select>
</p>

<!--1.文本域:textarea    2.name:里面填英文，避免乱码问题-->
<p>反馈：
    <textarea name="textarea"  cols="30" rows="10" placeholder="请输入您的宝贵意见" required></textarea>
</p>

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

    <!--pattern：正则表达式-->
<p>邮箱：
    <input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" >
</p>

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

    <!--step:一次增加的值-->
<p>数字：
    <input type="number" name="number" max="100" min="0" step="10" >
</p>

<!--滑块，调节音量:input type="range"
step="10":每次调节的范围
-->
<p>音量：
    <input type="range" name="voice" min="0" max="100" step="10">
</p>

<p>搜索框：
    <input type="search" id="dd" name="search">
</p>

    <p>
        <!--label:增强鼠标的可用性-->
        <label for="dd">点击我会调到id=""标记的文本框</label>
    </p>
    <p>
        <br>
        <input type="submit"><!--提交-->
        <input type="reset"><!--重置-->

        <!--input type="reset"：清空表单属性
        value=""：可以给表单赋值，相当于给个表单名字
        disabled:禁用该按钮
        -->
        <input type="reset" value="清空表单" disabled>
    </p>

    <!--表单初级验证1.placeholder：提示信息    2.required:不能为空     3.pattern：正则表达式-->
</form>
</body>
</html>