HTML笔记3_表单元素

2017-10-07 本文已影响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>