HTML Form

作者: roy_pub | 来源:发表于2018-11-25 10:44 被阅读6次

    label 标签

    label 为 input 元素定义标注,用于绑定一个标点元素,当点击标签的时候,被绑定的标签就回获得输入焦点。
    如下代码所示,点击 UserName不能获取焦点,点击Password可以获取焦点。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Table</title>
    </head>
    <body>
        UserName:<input type="text"> <br />
        <label>Password:<input type="password"></label>
    </body>
    </html>
    

    textarea

    文本域

        <textarea cols="50" rows="10" placeholder="留言板">
        </textarea>
    

    select

    下拉选择菜单

      <select>
            <option>BMW</option>
            <option selected>Volvo</option>
            <option>Geely</option>
        </select>
    

    input

    属性 属性值 描述
    type text 单行文本输入框
    password 密码输入框
    radio 单选按钮
    checkbox 复选框
    button 普通按钮
    submit 提交按钮
    reset 重置按钮
    image 图像形式的提交按钮
    file 文件域
    name 用户自定义 控件的名称
    value 用户自定义 input 控件默认文本值
    size 正整数 input 控件在页面中的显示宽度

    radio 类型,需要设置相同的name

    form

    from标签被用于定义表单域


        <form action="url" method="get" name="form name">
            <!-- 表单控件 -->
        </form>
    
    • action用来指定接手并处理表单数据的服务器程序的URL地址
    • method 设置提交方式,get 或 post
    • name 表单名称,区分同一页面的多个表单
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Table</title>
    </head>
    <body>
        <form action="regist.php" method="get" name="form name">
            <!-- 表单控件 -->
            用户名 <input type="text" value="" name="username"/> <br /><br />
            密  码 <input type="password" value="" maxlength="6" name="pwd"/> <br /><br />
            男<input type="radio" name="gender" checked="checked">
            女<input type="radio" name="gender"> <br /> <br />
            玄幻<input type="checkbox" name="love">
            言情<input type="checkbox" name="love">
            暴力<input type="checkbox" name="love"> <br /><br />
            <input type="file" /> <br /><br />
            <input type="image" src="timg.jpeg" width="120" height="45" /> <br /><br />
            <input type="button" value="注册" />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:HTML Form

        本文链接:https://www.haomeiwen.com/subject/mcjyqqtx.html