美文网首页
HTML(五)表单

HTML(五)表单

作者: InsaneLoafer | 来源:发表于2021-10-08 09:26 被阅读0次

    表单

    • 作用:用于收集用户信息,进行人机交互操作
    • 包含元素:文本框、单选按钮、列表框、图片框、复选框等。这些元素,统称"控件"
    • 示例:


    控件的常用属性

    • name名字允许重复代表一组操作,且用于前端
    • id名字不允许重复,且用于后端
    • 例子
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="" method="">
            <label>请输入姓名:</label>
                <input type="text" name="" id=""><br>
            <label>请输入密码:</label>
                <input type="password" name="" id=""><br>
            <label>再次输入密码:</label>
                <input type="password" name="" id=""><br>
            <label>性别:</label>
                <input type="radio" name="sex" id="" value="男">
                    <label>男</label>
                <input type="radio" name="sex" id="" value="女">
                    <label>女</label><br>
            <label>兴趣爱好</label>
                <input type="checkbox" name="" id="" value="游泳">
                    <label>游泳</label>
                <input type="checkbox" name="" id="" value="看书">
                    <label>看书</label>
                <input type="checkbox" name="" id="" value="爬山">
                    <label>爬山</label>
                <input type="checkbox" name="" id="" value="思考">
                    <label>思考</label><br>
            <label>生日:</label>
                <select>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <!--默认选中-->
                    <option value="1997" selected="selected">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                    <option value="2000">2000</option>
                </select>年
                <select>
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option>
                </select>月
                <select>
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option>
                </select>日<br>
                头像<img src="image/headlogo/3.jepg">
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select><br>
                <input type="button" name="普通按钮">
                <!--submit提交按钮会进入后台-->
                <input type="submit" name="提交按钮">
        </form>
    
    </body>
    </html>
    

    表单其他控件

    • 普通列表框(非下拉列表框)
    • 隐藏域
    • 上传控件
    • 多行文本框

    多行文本框

    <textarea rows="5" cols="30" name="" id="">请输入</textarea>
    

    上传

    <input type="file" name=""><input type="button" name="" value="上传">
    

    隐藏域(隐藏文本框)

    000<input type="hidden" name="" id="">000
    
    • 主要作用是信息传递,比如前段的信息不方便显示,但是要后端得到,或者后台的数据要在前端得到

    普通文本框

    • 能够展示所有选项
    • size:指定能够展示的选项数
    • multiple:指定多选数目
        <select size="4" multiple="4">
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
        </select>
    

    相关文章

      网友评论

          本文标题:HTML(五)表单

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