表单和表格

最新推荐文章于 2022-04-08 09:42:48 发布

吃薯片不吐皮

最新推荐文章于 2022-04-08 09:42:48 发布

阅读量467

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/uuaixuexi/article/details/114102130

版权

一.表单

表单标签

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
语法格式：
在这里插入图片描述

常用属性

action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method用于设置表单数据的提交方式，其取值为get或post。
Get 明文传输,数据量相对较少,不是很安全
Post 非明文传递,有请求体,数据量相对较大,较安全
获取数据用get,发送数据用post
3.name用于指定表单的名称，以区分同一个页面中的多个表单。

input控件

input 输入的意思。在上面的语法中，input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input标签还可以定义很多其他的属性，其常用属性如下表所示。

属性和取值

在这里插入图片描述
radio如果是一组，必须给他们命名相同的名字name，这样就可以多个选其中的一个啦。
Input的size跟字体大小有关系，不设置的情况下，浏览器默认情况下，input默认的输入框的宽度就是169px

使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center" border="1" width="500" cellpadding="2" cellspacing="0">
        <caption>
            <h3>学员信息录入</h3>
        </caption>
        <!-- input : 以name=value 进行数据传递
            select : 以select的name=option的value 进行数据传递
        -->
        <form action="http://www.baidu.com" method="GET">
            <!-- 隐藏 -->
            <input type="hidden" name="id" value="2">
            <tr>
                <td>姓名</td>
                <!-- 普通输入框 -->
                <!-- placeholder : 输入框中默认提示信息 -->
                <td><input size="20" type="text" name="username" placeholder="请输入用户名"> </td>
            </tr>
            <tr>
                <td>密码</td>
                <!-- 密码输入框 -->
                <td><input type="password" name="password"> </td>
            </tr>
            <tr>
                <td>性别</td>
                <!-- 密码输入框 -->
                <td>
                    <!-- 单选的name必须一致 -->
                    <input type="radio" name="sex" value="1"> 男
                    <input type="radio" name="sex" value="0"> 女
                    <!-- checked 默认选择项 
                        checked , checked=true , checked="checked"
                    -->
                    <input type="radio" name="sex" checked="checked" value="2"> 保密
                </td>
            </tr>
            <tr>
                <td>学校</td>
                <!-- 下拉列表 -->
                <td>
                    <!-- 对select添加 multiple 属性 可以选择多个项
                        对option添加 selected属性 设置默认选择项
                    -->
                    <select  name="edu">
                        <option value="河北科技大学1">河北科技大学</option>
                        <option value="河北师范大学1">河北师范大学</option>
                        <option selected="selected" value="河北地质大学1">河北地质大学</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>选修课程</td>
                <td>
                    <!-- 复选框默认选择的设置方式和单选一样 -->
                    <input type="checkbox" checked="checked" name="courses" value="java"> java
                    <input type="checkbox" name="courses" value="Oracle"> Oracle
                    <input type="checkbox" name="courses" value="Android"> Android
                </td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td>
                    <textarea name="eval"  cols="30" rows="4"></textarea>
                </td>
            </tr>
            <tr>
                <td>上传头像</td>
                <td><input type="file"></td>

            </tr>
            <tr align="center">
                <td colspan="2">
                    <!-- 可以提交 -->
                    <button>button会触发action</button>
                    <!-- 普通按钮 -->
                    <button type="button">button[type="button"]不会触发action</button>
                    <!-- 普通按钮 -->
                    <input type="button" value="input[type='button']不会触发action">
                    <!-- 提交按钮 -->
                    <input type="submit" value="input[type='submit']会触发action">
                    <!-- 重置按钮 -->
                    <input type="reset" value="重置">
                    <!-- 使用图片代替提交按钮 -->
                    <input type="image" src="./images/faq01.jpg">
                </td>
            </tr>
        </form>
    </table>
</body>

</html>

效果图
在这里插入图片描述

扩展-禁用输入框

比如更改操作,用户名不可以更改,这种情况,可以使用对该输入框禁用
Readonly : 可以获得焦点,但是不可以修改,另外数据可以传递
Disable : 不可以获得焦点,不可以修改,数据不可以传递
在这里插入图片描述

二.表格

使用方式

在这里插入图片描述

Table属性

在这里插入图片描述

结构

在这里插入图片描述

标题

在这里插入图片描述
使用caption来定义表的标题

合并单元格

跨行合并：rowspan
跨列合并：colspan
合并单元格的步骤：
1、先判断跨行合并还是跨列合并
2、跨行合并用rowspan属性，跨列合并用个colspan属性
3、将rowspan 或者colspan写在第一个要合并的单元格上
4、将合并的行数和列数写在指定的属性值上
5、将多余的单元格注释掉
在这里插入图片描述

吃薯片不吐皮

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表单和表格

目录一.表单表单标签常用属性input控件属性和取值使用扩展-禁用输入框二.表格标签使用方式Table属性结构标题合并单元格一.表单表单标签在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。语法格式：常用属性action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。method用于设置表单数据的提交方式，其取值为get或post。Get
复制链接

扫一扫