HTML表单

本章主要内容

一、表单

1、表单原理

            BS模式下，网页中的数据(表单元素)，通过表单的action属性，提交给后台的数据库(增、删、修、查)，后台及时响应客户端，将结果显示在浏览器中

 

2、表单的作用？

            将数据，提交给action属性中的值（地址）

 

3、在HTML中，表单的语法

    <form method=”提交方式：

post|get” action=”处理页面或方法”>

            将表单元素放置在该标记中

        action没有值，提交给自己

    </form>

3.1 属性具体说明，参考P64页

3.2 method的2种提交数据方式区别P66页

 

二、表单元素(也叫控件)

    1、以<input type=”值不同的”>

l type=”text”——文本框

l type=”password”——密码框

l type=”checkbox”——复选框

n 被选中——checked=”checked”

l type=”radio”——单选按钮

u   name的值，必须相同

u   被选中——checked=”checked”

l type=”file”——文件上传控件

 按钮

l type=”button”——普通按钮

l type=”reset”——重置按钮

l type=”submit”——提交按钮(触发表单)

l type=”image”——图片按钮（触发表单）

 

 常用的属性：

ü name=表单元素名字，在同一个网页中可以有同名的

ü id=唯一的标识符

ü value=表单元素的值

ü checked=”checked” 复选框和单选按钮被选中

ü readonly=” readonly” 只读属性

ü disabled=” disabled” 禁用

ü width=按钮的宽度

ü size=文本框或密码框的宽度

ü 文本框或密码框输入的字符最大数——maxlength

 

2、不是以<input>标记开头的表单元素

 下拉框或列表框：

            <select>

                    <option selected=”selected”>下拉框的值</option>

                    ………………………………………………

            </select>

 文本域（多行文本框）

<textarea cols=”列的宽度” rows=”显示的行数” >

</textarea>

 

三、理解什么是语义化

1、表格推荐采用如下语法

        <table>

            <caption>表格的标题</caption>

            <thead>—表格的标题行

                <tr>

                    <td>每列的标题</td>

                </tr>

            </thead>

            <tbody>

<tr>

                    <td>每行的内容</td>

                </tr>

            </tbody>

        </table>

 

2、域——<fieldset>

     域标题——<legend>

3、表单元素的标注

        <lable for=”表单元素的id”></lable>

Lable：也叫标签