html：对于表单表格的初步认知

<table>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td>高老庄</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女儿国</td>
            </tr>
        </tbody>
    </table>

css设置表格，代码如下：

1、设置table整体

table {
            /* 设置表格宽度 */
            width: 400px;
            /* 表格居中 */
            margin: 0 auto;
            /* 边框 */
            border: 1px solid red;
             /* 合并边框 */
             /* 方法一 */
            border-spacing:0px ;
             /* 方法二 */
            border-collapse: collapse;
            /* 设置背景色样式 */
            background-color: pink;
        }

2、设置内部边框

/* 设置内部边框 */
        tr,
        td,
        th {
            border: 1px solid red;
        }

3、用伪类选择器控制隔行背景变色

tr:nth-child(2n+1) {
            background-color: sandybrown;
        }

4、调整td文字在在表格中的位置

td {
            height: 50px;
            /* 方法一 */
            text-align: center;
            /* 方法二 */
            vertical-align: middle;
        }

三、长表格

1、长表格的作用

有一些情况下表格是非常的长的

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

2、如何设置长表格

在HTML中为我们提供了三个标签

thead 表头永远在表格的头部

tbody 表格的主体永远在表格中间

tfoot 表格的底部永远在表格底部

用来区分表格不同的部分，顺序，浏览器会自动调整

注：

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行需要通过tbody > tr

四、表单（form）

1、如何创建表单

form标签创建

属性：

action属性（必须要写）

指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。

2、添加表单项

（1）input来创建一个文本框

type属性是text

name属性：提交内容的名字

如果希望表单项中的数据会提交到服务器中，必须指定一个name属性

value属性值：作为文本框的默认值显示。

用户名:
        <input type="text" name="userName" value="">

（2）input创建一个密码框

type属性值是password

name属性：提交密码的名字

登录密码:
        <input type="password" name="passWord" id="">

（3）input创建一个单选按钮

- type属性：radio

- name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

- value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器

- checked="checked"属性默认选中

性别:
        男:<input type="radio" name="sex" value="male"> 女:<input type="radio" name="sex" value="female">

（4）input创建一个多选框

-type属性:checkbox

-checked="checked"属性默认选中

 兴趣爱好
        足球 <input type="checkbox" name="hobby">
        篮球 <input type="checkbox" name="hobby">
        羽毛球 <input type="checkbox" name="hobby">

(5) select来创建一个下拉列表

-name属性设置给select，

-value属性设置给option

-selected="selected"，将选项设置为默认选中

 地域:
        <select name="difang" id="">
            <option value="an">安徽</option>
            <option value="nj">南京</option>
            <option value="sh">上海</option>
            <option value="bj">北京</option>
        </select>

（6）textarea创建一个文本域

<textarea name="txetarea" id="" cols="30" rows="10">
        </textarea>

（7）input创建一个提交按钮，点击后表单就会提交

-type属性值：submit

-value属性：指定按钮上的文字

<input type="submit" value="注册" />

（8）创建一个重置按钮

type属性值：reset

点击重置按钮以后表单中内容将会恢复为默认值

（9）创建一个单纯的按钮

这个按钮没有任何功能，只能被点击

<input type="button" value="按钮" />

（10）button标签来创建按钮

方式和使用input类似，它是成对出现的标签，使用起来更加的灵活

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

补充：input属性

1：autocomlete="off" 关闭自动补全

2：readonly 设置为只读，不能修改

3：disabled 设置为禁用

4：autofocus 自动获取焦点

5：placeholder 提示内容

Astar stars

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html：对于表单表格的初步认知

今日份更新，谢谢大家支持。
复制链接

扫一扫

专栏目录