表单

头像
shasha
    阅读 6 分钟

    1. 表单

    表单的作用是用来将用户信息提交给服务器。比如：百度的搜索框，注册，登陆这些操作都需要填写表单。

    form 标签

    使用form创建的仅仅是一个空白的表单，我们需要向form中添加不同的表单项。

    form 的action属性

    form标签中必须指定一个action属性，该属性指向的是一一个服务器的地址。当我们提交表单时将会提交到action属性对应的地址。

    <form action="target.html"><form>

    input标签

    使用input来创建一个文本框

    (1) type属性为text时：创建单行文本框

    • 它的type属性可以是text
    • 如果希望表单项中的数据会提交到服务器中，就必须给表单项指定一个name属性。name表示提交内容的名字。
    • 用户填写的信息会附在url地址的后边，以查询字符串的形式发送给服务器
      url地址？查询字符串
      格式： 属性名=属性值&属性名=属性值&属性名=属性值
    • 在文本框中也可以指定value属性值，该值将作为文本框的默认值显示

    (2) type属性为password时：创建密码框

    (3) type属性为submit时：

    在提交按钮中可以通过value属性值来指定按钮的文字

    <form>
    <input type="submit" value="注册"/>
</form>

    结果：
    image.png

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="test.html">
    用户名<input type="text" name="username">　<br/>
    密码<input type="password" name="password"><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

    结果：
    image.png

    输入用户名和密码:
    image.png

    点击注册按钮提交(因为使用了name属性，name属性值会提交给服务器地址)：
    image.png

    (4) type属性为reset时：创建重置按钮

    • 点击重置按钮后，表单中的内容将会恢复为默认值
    <input type="reset"/>

    image.png

    注意：以下三种和用input创建的按钮功能类似,button标签也可以创建按钮

        <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">这是一个按钮</button>

    结果：
    image.png

    (5) type属性为button 创建一个按钮

    • 创建的按钮没有任何功能，只能被点击，可以用于js来绑定事件
    <input type="button" value="这是一个按钮"/>

    结果：
    image.png

    (6) type属性为radio时：创建单选按钮

    • 使用input来创建一个单选按钮，它的type属性使用radio
    • 单选按钮通过name属性进行分组，name属性相同的是一组按钮
    • 像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
    <form action="test.html">
    用户名<input type="text" name="username">　<br/>
    密码<input type="password" name="password"><br/>
    <input type="submit" value="注册"><br/>
    性别<input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
</form>

    结果：
    image.png

    若选择男后，点击注册按钮：
    image.png

    因为有value值来区分：
    image.png

    (7) type属性为checkbox时：创建多选框

    • 使用input创建一个多选框，它的type属性使用checkbox
    • 用法和单选框类似，都需要用name和value
    <form action="test.html">
    用户名<input type="text" name="username">　<br/><br/>
    密码<input type="password" name="password"><br/><br/>
    性别<input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    <br/><br/>
    爱好<input type="checkbox" name="hobby" value="football"/>足球
        <input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="pingpong"/>乒乓球
    <br/><br/>
    <input type="submit" value="注册"/><br/>
</form>

    结果：
    image.png
    选择多个爱好并注册提交：
    image.png

    注意： 如果希望在单选按钮或者多选框中指定默认选中的选项，则可以在希望选中的项中添加chhecked="checked"属性

    性别<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female" checked="checked"/>女

    select 标签创建下拉列表

    • 使用select 来创建下拉列表
    • 在下拉列表中使用option标签来创建一个一个的列表项
    • 下拉列表的name属性需要指定给select,而value属性需要指定给option
    • 可以在option中添加selected="selected"来将选项设置为默认选中
    • 当为select添加一个multiple="multiple",则下拉列表变为一个可多选的下拉列表。可同时选中多个(按着crt选择多个)
        你喜爱的水果
    <select name="fruit">
        <option value="apple">苹果</option>
        <option value="pear">梨</option>
        <option value="strawberry">草莓</option>
    </select>

    结果：
    image.png

    因为有value 属性：
    image.png

    • 在select 中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，通过lable属性来指定分组的名字
        你喜爱明星
    <select name="star" multiple="multiple">
        <optgroup label="男明星">
            <option value="ldh">刘德华</option>
            <option value="gfc">郭富城</option>
        </optgroup>
        <optgroup label="女明星">
            <option value="zw">赵薇</option>
            <option value="lxr">林心如</option>
        </optgroup>

    </select>

    结果：
    image.png

    textarea标签：创建文本域

    name属性也是用于提交给服务器

     自我介绍<textarea name="info"></textarea>

    结果：
    image.png

    输入内容，自动会有上下滚轮
    image.png

    点击注册：
    image.png

    lable 标签：用于选中表单中的提示文字

    • 专门用来选中表单中的提示文字
    • 该标签可以指定一个for属性，该属性值需要指定一个表单中的id值
        <label for="um">用户名</label>
    <input type="text" name="username" id="um"/>　

    结果：通过点击用户名，鼠标就可以进入文本框中
    image.png

    fieldset标签： 为表单项进行分组

    • 可以将表单项中的同一组放到一个fieldset中
    • 使用legend子标签，来指定组名
        <fieldset>
        <legend>用户信息</legend>
        用户名<input type="text" name="username"><br/><br/>
        密码<input type="password" name="password"/><br/>
    </fieldset>

    结果：
    image.png

    html
    shasha
    28 声望7 粉丝
    « 上一篇
    表格
    下一篇 »
    JSON

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.3k

    头像
    这可能是见过的最好用的弹幕库 🔥🔥

    和声伴奏赞 1阅读 325

    头像
    一个简易的 Vue-Ref 响应式系统

    Ловень阅读 562

    头像
    深入理解作用域与作用域链

    银之夏雪阅读 540

    头像
    （Threejs javascript 3D建模框架）WEB三维CAD中加载和保存STEP模型

    梦想云图网页CAD阅读 510

    头像
    如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面

    曹旭升阅读 502

    头像
    深度剖析 JavaScript 变量提升与暂时性死区：原理、实战与避坑指南

    银之夏雪阅读 483

    0 条评论
    得票最新