跳到主要内容

表单

  • 在网页中，通过表单来将信息提交给服务器
  • 使用form标签来创建一个表单

文本框​

<!-- action用来指定表单要提交到哪 -->
<form action="target.html">
    <!-- 表单项 -->
    <!-- 
        文本框
            - input type属性为text
            - 如果希望表单中的数据真的被提交给服务器
                必须为表单指定name
    -->
    <input type="text" name="username">

    <!-- 
        提交按钮
            - input type属性为submit
            - 可以通过value属性来修改按钮上面的文字
     -->
    <input type="submit" value="登录">
</form>
<form action="target.html">
    <div>
            <!-- 
                placeholder
                    - 用来设置文本框的占位符
                value
                    - 文本框中可以通过value来指定默认值
                disabled
                    - 禁用表单项，不会被提交
                readonly
                    - 表单项无法修改，但是可以提交
                checked
                    - 设置默认选中的单选和多选
                selected
                    - 设置默认选中的下拉项
             -->
            用户名 <input type="text" name="username" placeholder="请输入用户名" value="admin" readonly>
        </div>
    
        <div>
            <!-- 
                使用input type为password来创建密码框，密码框中的内容不会以明文显示
                默认情况下，表单中的数据会通过url地址来发送，url地中?后的内容被称为查询字符串（query string）
                    查询字符串是一个一个的名值对结构，一个数据名对应一个值，多个名值对之间使用&隔开
                        数据发送给服务器后，服务器可以根据数据名获取对应的值
             -->
            密码 <input type="password" name="password">
        </div>
</form>

单选框​

<form action="target.html">
    <div>
        <!-- 
            单选框
                - 使用input type=radio来创建一个单选框
                    单选框是通过name属性来分组的，相同name属性的为一组
                    像这种选择框，不需要用户填写内容，还必须为表单项指定value，value最终会成为提交给服务器的值
         -->
        性别：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
    </div>
</form>

多选框​

<form action="target.html">
    <div>
        <!-- 
            多选框
                - 使用input type=checkbox来创建多选框
         -->
        爱好：
        <input type="checkbox" name="hobby" value="ppq">乒乓球
        <input type="checkbox" name="hobby" value="lq">篮球
        <input type="checkbox" name="hobby" value="ymq">羽毛球
        <input type="checkbox" name="hobby" value="zq">足球
    </div>
</form>

下拉框​

<form action="target.html">
    <div>
        <!-- 
            下拉框
                - 使用select来创建下拉列表
                - 添加 multiple 属性后可以将下拉列表设置为多选的下拉列表
         -->
        你最喜欢的编程语言
        <select name="language" multiple>
            <option value="js">JavaScript</option>
            <option selected>Java</option>
            <option>Python</option>
        </select>
    </div>
</form>

按钮​

<form action="target.html">
    <div>
        <input type="submit" value="登录">
        <!-- 重置按钮 重置表单 -->
        <input type="reset">
        <!-- 普通按钮 -->
        <input type="button">
    </div>
</form>