第十一章表单与表格

作者: 扶光_ | 来源:发表于2020-11-29 11:42 被阅读0次

第十一章表单与表格
CSS初探16
表格与表单
表格与表单
表格与表单
表格与表单
表格与表单
表格与表单
2018-08-17
HTML 表格与表单

一,表单

1.表单是干什么的?

表单是用来进行前后端交互的。如淘宝的登录页面

登录页面

form表单:用来包裹表单数据的

form

action 一个处理这个form信息的程序所在的URL 规定向何处发送表单
method提交表单的方式
post: 表单数据会包含在表单体内然后发送给服务器. 这种只是相对get方式安全一些，而更安全的要等到我们学习js之后才可以
get: 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）
target：指示在提交表单之后，在哪里显示收到的回复 _self默认 _blank在新窗口打开 _parent父框架
name: 这个form的名字。在HTML4中，这个用法不被推荐(作为替代，应该使用id).

2.表单(input)的一些type属性:

什么是type属性呢?就是表单的控件类型. 下面列举一些常用的控件类型


        文本框    <input type="text">
        密码框    <input type="password">
        按钮      <input type="button" value="提交">     value是里面的值 
        多选框    <input type="checkbox">   
        颜色      <input type="color">
        单选      <Input type="radio" name='same' >     设置一样的name属性

显示结果:

显示
这里只是举例了一些常用的表单控件,大家可以上这个网址来看更多的控件https://www.w3school.com.cn/html/html_form_input_types.asp

3.input标签里面的一些输入属性

placeholder  输入提示信息
value 属性规定输入字段的初始值
name 给input起一个名字 作用:没有name属性,这条数据不会被提交,标识符就是name值(英文)
checked 默认选中,  (只对按钮生效)
autocomplete="off" 属性规定表单或输入字段是否应该自动完成(也可以理解不记忆提交过的内容)
antofocus 自动聚焦(只对可以聚焦的控件有效)
required 必需要写的
readonly 属性规定输入字段为只读（不能修改）

二,表格

    <table border="1">
                   <caption>我是大标题</caption>                 //表格标题(可以自动居中)
                   <tr>                                         //tr代表行
                        <th>姓名</th>                          //th代表小标题(自动居中加粗)
                        <th>性别</th>
                        <th>学号</th>
                   </tr>

                    <tr>
                        <td>二狗</td>            //td代表列
                        <td>男</td>
                        <td>123456</td>
                   </tr>

                </table>

结果图

1.

表格的默认样式，如上图的双线我们可能会觉得很难看，想变成单线该怎么办呢，这就是表格的第一个默认样式，想table中加入这条语句
table{border-collapse:collapse;}
就会变成这样：

结果图

2.

如果我们想调整表格和表格之间的空隙应该怎么办呢，

加入这个:border-spacing:20px;

结果图

3.合并单元格

合并行:colspan="2" 条件,要先删除一个才能达到想要的效果.

 <tr>
             <th>姓名</th>
             <th colspan="2">性别</th>
             <!-- <th>学号</th> -->       将学号这列先注释掉,
        </tr>

合并行

合并列:rowspan="2"

 <tr>
             <td>二狗</td>
             <td rowspan="2">男</td>
             <td>123</td>
        </tr>
        <tr>
            <td>三狗</td>
            <!-- <td rowspan="">男</td> -->
            <td>234</td>
       </tr>

合并列

- 扩展

文本域

写法: <textarea cols="30" row="10">123</textarea>
cols代表行,rows代表列,如下图显示

image.png

下拉按钮

写法:

       <select>
                    <option>辽宁</option>
                    <option disabled>上海</option>       disabled表示不可以选中
                    <option>山西</option>
                    <option selected>黑龙江</option>           selected表示默认选中
                </select>

如下图: