html表格和表单

HTML表格

表格是由行和列组成的栅格，这些行和列组成一个个单元格，每个单元格都可以用于放置文本或图形等。

表格由<table>开始，由</table>结束

<tr>标签定义表格的行，表格有多少行，就有多少个<tr>标签

<td>标签定义表格的单元格，有多少单元格就有多少标签

<th>标签定义表格的表头，与<td>类似，内容会加粗显示

<html>
    <head>
        <title>表格标签示例</title>
    </head>
    <body>
        <table >
            <tr><th>第一讲</th><th>第二讲</th><th>第三讲</th></tr>
            <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr>
        </table>
    </body>
</html>
View Code

 

width,height这两个属性用于设置表格的大小。如果不设置会根据各行各列的总和来确定宽高。可以使用具体的数字（单位是像素）来表示，也可以是用百分比的形式（与整个屏幕相比）

 

border属性，设置表格的边框的大小，表示边框的边厚度和框线。如果设置成0，表示不需要边框和框线

rowspan和colspan属性用在<td>或<th>标签中，表示单元格要跨越的行的个数或列的个数。

<html>
    <head>
        <title>表格标签示例</title>
    </head>
    <body>
        <table border="2" width="50%" height="50%">
            <tr><th rowspan="2">第一讲</th><th>第二讲</th><th>第三讲</th></tr>
            <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr>
        </table>
    </body>
</html>
View Code

 

 

HTML表单

表单用于收集不同类型的用户输入，是实现动态交互的基础。

常用表单元素

元素描述

元素类型

单行文本框

text

密码框

password

单选按钮

radio

复选框

check

多行文本框

textarea

下拉列表

select

提交按钮

submit

重置按钮

reset

1表单

所有表单元素都应该在<form>和</form>之间，表单之间不可以嵌套或者重叠

method属性设置表单的提交方式，默认为get. get表示表单数据作为URL变量提交，post表示表单数据作为HTTP post方式发送。

action属性设置表单的提交对象，action=”deal.jsp”表示表单元素的信息提交给服务器上的deal.jsp

1 单行文本框

size属性设置文本框的显示长度，默认值为20

value属性设置文本框的初始值

readonly属性，文本框的内容不能被编辑

name文本域的名称

<html>
    <head>
        <title>单行文本框示例</title>
    </head>
    <body>
        <form method="post" action="deal.jsp">
            <input type="text" name="username" size="20">
            <input type="text" name="username1" size="20" value ="sun" readonly>
        </form>
    </body>
</html>
View Code

 

 

2密码框

输入的内容看不到，但是可以被发送到服务器

属性和单行文本框类似

<html>
    <head><title>密码框示例</title></head>
    <body>
        <form action="deal.jsp">
            <input type="password" name="pw" size="20" value="123">
        </form>
    </body>
</html>
View Code

 

 

3 单选按钮

checked属性表明该选项被默认选中

为实现选项之间的单选效果，需要每个选项的name属性保持一致

<html>
    <head><title>单选按钮示例</title></head>
    <body>
        <p><input type="radio" name="career" value="工人" checked>工人</p>
        <p><input type="radio" name="career" value="农民">农民</p>
        <p><input type="radio" name="car" value="我">我</p>
    </body>
</html>
View Code

 

 

4 复选框

为实现服务器端一次性读取所有选中的选项，需要每个选项的name一致

<html>
    <head><title>复选框示例</title></head>
    <body>
        </p> 
            <input type="checkbox" name="hobbies" value="音乐">音乐
            <input type="checkbox" name="hobbies" value="旅游" checked>旅游
            <input type="checkbox" name="hobbies" value="读书">读书
        </p> 
    </body>
</html>
View Code

 

 

5 多行文本框

rows属性文本的行数

cols属性文本的列数

文本的初始内容写在<textarea></textarea>之间

注：多行文本框不是input type

<html>
    <head><title>多行文本框示例</title></head>
    <body>
        <p>请输入你的留言</p>
        <p><textarea name="message" rows="5" cols="30">此处输入内容</textarea></p>
    </body>
</html>
View Code

 

6 下拉列表

size表示下拉列表可见选项

multiple属性可以设置为选择多项，当设置为多项的时候，size需要设置为大于1

selected属性表明该项是默认选中

<html>
    <head><title>下拉列表示例</title></head>
    <body>
        <select size="2" name="mysite" multiple="multiple">
            <option value="163" selected>网易</option>
            <option value="sohu">搜狐</option>
            <option value="sina">新浪</option>
        </select>
    </body>
</html>
View Code

 

 

7 提交按钮

type=”submit”是提交按钮的标识

value是提交按钮的值，同时也是提交按钮上显示的内容

name是提交按钮的名字，可以根据这个名字来获取提交按钮的值

每个表单至少由一个提交按钮完成提交，可以有多个按钮完成不同的提交动作

多个提交按钮的名字可以相同，但是值不一样；也可以使用不同的名字，根据名字区分不同的提交按钮

<html>
    <head><title>提交按钮示例</title></head>
    <body>
        <input type="submit" value="提交" name="b1">
    </body>
</html>
View Code

 

 

 

8重置按钮

把表单元素恢复到原始状态

<html>
    <head><title>重置按钮示例</title></head>
    <body>
        <input type="reset" value="重置" name="b2">
    </body>
</html>
View Code

 

posted @ 2021-03-02 21:35  白菜茄子  阅读(301)  评论(0)  编辑  收藏  举报