表格和表单

表格

    <table border="1">

        <caption>

            这是标题

        </caption>

        <th>

            这是单元格头部

        </th>

        <tr>

            <td>这是单元格</td>

            <td>这是单元格</td>

            <td>这是单元格</td>

        </tr>

        <tr>

            <td>这是单元格</td>

            <td>这是单元格</td>

            <td>这是单元格</td>

        </tr>

    </table>

效果如下 

 

其中表格具有几个属性，我们来详细说一下：

1、边框：border="里面填写数字"

        显而易见这是设置边框的

2、看到边框之间有缝隙但是不想使用CSS可以使用： cellspacing="0"

3、对于单元格，我们肯定有合并单元格的操作

        （1）横向合并单元格：colspan="合并几个单元格这里填几"

        （2）纵向合并单元格：rowspan="合并几个单元格这里填几"

 注意：合并单元格需要拥有足够的单元格删除，即合并的几个单元格+剩余的单元格=这一行可以存在的单元格

4、表格结构，与书写位置无关

thead：头部

tbody：主体

tfoot：底部

表单

通过form标签创建表单

form属性

1、action：设置表单提交的地址

2、method：设置表单提交的方式

可选值：

        post：指的是http post方法，表单数据会在包含在表单体内然后发给服务器，用于提交敏感数据，如用户名和密码等

        get：默认值，指的是http get方法，表单数据会附加在action属性的URL中，并用？作为分隔符，一般用于不敏感信息

3、target：提交表单后在何处显示响应

        可选值：     

        _blank：在新窗口响应

        _self：在当前窗口响应

        _parent：在父框架内响应

        _top：在窗口的整个body中

        framename：在命名的iframe中响应

4、autocomplete：规定表单是否打开自动完成功能。启动自动完成功能后，浏览器会根据用户之前输入的值自动填写值

5、novalidate：规定提交时不验证表单数据

补充属性

        readonly 设置为只读，不能修改

        disabled 设置禁用

        autofocus 自动获取焦点

        placeholder 提示内容

        checked 设置是否选中

表单元素

input 输入标签

type=””设置标签类型

常用类型：

text（文本），password（密码），button（按钮），radio（单选按钮，name应该相同），checkbox（复选框），reset（重置按钮），submit（提交按钮）、file（上传文件）

新增属性：（老web不支持）

        color：默认黑色，设置value值为完整的十六进制才有效

        date：设置日期，可用value修改日期，格式2022-03-12

        email：表单提交时，会判断所填的内容是否符合邮箱格式

        url：表单提交时，会判断所填的内容是否是网址格式

        number：可以设置输入数字的长短[min,max]

        month、range、search、time、week

        select：下拉列表，option设置选项

        textarea：设置文本域，rows行，cols列

        button：可点击按钮

                可设置

                        type:reset 重置

                        submit 提交

                       button 按钮

        label：input定义标签，提高鼠标用户的体验度，for属性值为相关元素的id，form属性值是form的id

eg：<input type=”radio” name=”sex” id=”sex”><label for=”sex”>男</label>

6.datalist：设置input可能选择的标签选项，input的name值等于datalist的id值，