美文网首页
HTML笔记3_表单元素

HTML笔记3_表单元素

作者: 相关函数 | 来源:发表于2017-10-07 22:46 被阅读8次

    在前端开发中经常使用到表单来向服务器传值.

    form

    form标签是一个表单标签的容器,该标签的开始和结束直接定义了一个表单.

    • 属性name 定义改表单的名字
    • method属性定义以什么方式向后台提交数据,一般使用post
    • action属性指定以什么脚本来处理提交的数据

    input

    input是一个自结束标签.他可以制定表单中的许多元素.常用属性为name,type.
    其中type属性的不同创建出的input也不同

    • type="text" 这是一个文本框
    • type="password"这是一个密码框
    • type="radio" 这是一个单选按钮
    • type="checkbox"这是一个多选按钮 value属性表示提交到服务器的值
    • type="image"定义图片域 点击可以提交 其中包含src属性和width以及height属性
    • type="file"定义文件域
    • type="submit"定义提交按钮,其中id标签可定制按钮上显示的文字
    • type="reset"表示充值所有表单数据
    • type="button"表示一个按钮,按钮的功能可以使用js定制
    • type="hidden"隐藏域

    input的一些属性

    当input为输入框的时候可以使用maxlength指定文本框的最大输入长度,readonly表示不可输入 size指定根据输入长度指定框的size

    当input为按钮的时候使用checked订制默认选中,disabled指定可选状态

    button

    button标签可以格式化按钮上的文字,type属性可以使用submit,reset和button指定与input同样的功能.

    select

    select可以定制列表框,下拉菜单和选项组列表框.当select为列表框和选项组列表框的时候可以指定列表框的size以及多选状态mutiple

    • option为列表框中的元素.value属性指定提交到服务器的值,selected属性指定默认选中的元素

    • optgroup为选项组,其中label属性表示该组的名字.

    textarea

    多行文本框

    • cols必填属性指定高度问多少字符
    • rows必填属性指定宽度
    • readonly指定改文本框为只读

    示例代码

    <!DOCTYPE Html>
    <html>
    <head>
        <title>Joe</title>
    </head>
    
    <body>
        <form name="regform" method="post" action="http://www.baidu.com"/>
            单行文本框<input type="text" name="username" id="username" maxlength="10" readonly="readonly"/> <br/>
            <label for="password">密码框</label><input type="password" name="password" id="password" size="5"/> <br/>
            隐藏域<input type="hidden" name="hidden" id="hidden"/> <br/>
            单选按钮<input type="radio" name="sex" id="male" checked="checked"/> 男
                   <input type="radio" name="sex" id="female"/> 女<br/>
            复选框<input type="checkbox" name="hobby" value ="1" id="hfootball" disabled="disabled"/> 足球
                <input type="checkbox" name="hobby" value ="2" id="hfootball" checked="checked"/> 篮球
                <input type="checkbox" name="hobby" value ="3" id="hfootball"/> 网球<br/>
            图像域<input type="image" src="album.png" width="100px" height="20px" name="hobby" id="hfootball"/><br/>
            文件上传域<input type="file" name="file" id="file"/><br/>
            提交按钮<input type="submit" name="submit" id="提交按钮"/><br/>
            充值按钮<input type="reset" name="reset" id="重置按钮"/><br/>
            普通按钮<input type="button" name="button" id="普通按钮"/><br/>
    
            button提交按钮<button type="submit" name="submit2">提交按钮</button><br/>
            button重置按钮<button type="reset" name="reset2"><b>重置按钮</b></button><br/>
            button普通按钮<button type="button" name="button2" disabled="disabled"><i>普通按钮</i></button><br/>
            下拉菜单<br/>
    
            <select name="city" id="city">
                <option value="beijing">北京</option>
                <option>上海</option>
                <option selected="selected">南京</option>
                <option>天津</option>
            </select>
            <br/>
    
            列表框<br/>
    
            <select name="city1" id="city1" size="3" mutiple="mutiple">
                <option value="beijing">北京</option>
                <option>上海</option>
                <option selected="selected">南京</option>
                <option>天津</option>
            </select>
    
            <br/>
            选项组列表框<br/>
            <select name="city2" id="city2" size="6" mutiple="mutiple">
                <optgroup label="一线城市">
                    <option value="beijing">北京</option>
                <option>上海</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option>南京</option>
                    <option>杭州</option>
                    <option>大连</option>
                </optgroup>
            </select>
            <br/>
    
            多行文本框<br/>
            <textarea name="content" cols="28" rows="4" readonly="readonly">
            1. 协议要求很多
            2. 你别管,只要同意即可
            </textarea>
    
    
    
        </form>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML笔记3_表单元素

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