当前位置 CSS模版园 >> 网站制作 >> html >> 第6课 第7节 html元素:form表单

第6课 第7节 html元素:form表单

HTML 表单用于搜集不同类型的用户输入。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

表单使用表单标签(<form>)定义。

form属性:

属性 描述
accept-charset charset_list 规定服务器可处理的表单数据字符集。
action url 表单信息提交页面,在该页面,可以获取用户提交的内容
autocomplete on
off
html5新属性,规定是否启用表单的自动完成功能。
enctype application/x-www-form-urlencoded
multipart/form-dat
ext/plain
规定在发送表单数据之前如何对其进行编码。
method get
post
规定用于发送 form-data 的 HTTP 方法。
name form_name 规定表单的名称。
novalidate novalidate html5新属性,如果使用该属性,则提交表单时不进行验证。
target _blan
_self
_parent
_top
规定在何处打开 action URL。

表单元素:

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<fieldset>
    <legend>html表单实例</legend>
    <form action="url" method="get" target="_blank">
        <table border="1" cellpadding="5" cellspacing="1" style="margin:auto">
            <tr>
                <td>文本框</td>
                <td><input type="text" value="输入文本" /></td>
            </tr>
            <tr>
                <td>密码框</td>
                <td><input type="password" value="输入密码" /></td>
            </tr>
            <tr>
                <td>下拉框</td>
                <td>
                    <select>
                        <option>下拉框</option>
                        <option>下拉框2</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>单选按钮</td>
                <td>
                    <label for="rdo1"><input id="rdo1" name="rdo" type="radio" value="1" />选项1</label>
                    <label for="rdo2"><input id="rdo2" name="rdo" type="radio" value="2" />选项2</label>
                </td>
            </tr>
            <tr>
                <td>复选框</td>
                <td>
                    <label for="cbo1"><input id="cbo1" name="cbo" type="checkbox" value="1" />选项1</label>
                    <label for="cbo2"><input id="cbo2" name="cbo" type="checkbox" value="2" />选项2</label>
                </td>
            </tr>
            <tr>
                <td>按钮</td>
                <td>
                    <input type="button" value="普通按钮" />
                    <input type="reset" value="内容重置按钮">
                    <input type="submit" value="提交表单按钮" />
                    <button>可放图片的按钮<img src="http://www.cssteach.com/statics/demo/eg_cute.gif" height="30" /></button>
                </td>
            </tr>
        </table>
    </form>
</fieldset>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-9-53.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版