0
点赞
收藏
分享

微信扫一扫

DAY 6 表单系列问题

SPEIKE 2022-04-22 阅读 53
html5前端

表单 form


一、表单元素

1、<input type="" name="" value="">
type类型:
①text 文本框——placeholder 提示文本

<input type="text" placeholder="请输入密码"

在这里插入图片描述
②name:划定作用域,也是关键词。
③value:表单元素的值

<input id="submit" type="submit" value="注册/登录">

在这里插入图片描述
2、type类型
①password 密码
②radio 单选

<p>
            <span>🐘</span>
            <input name="gender" type="radio" value="1">
        </p>
        <p>
            <!-- name 划定作用域,也是关键词
            checked  默认选择 -->
            <span>🦒</span>
            <input checked  value="0" name="gender" type="radio">
        </p>

在这里插入图片描述

③checkbox 复选(也就是多选)

<p>
            <span>阅读</span>
            <input value="阅读" name="hobby" type="checkbox">
        </p>
        <p>
            <span>旅行</span>
            <input value="旅行" name="hobby" type="checkbox">
        </p>
        <p>
            <span>冥想</span>
            <input value="冥想" name="hobby" type="checkbox">
        </p>

在这里插入图片描述

④button 按钮
⑤submit 提交 (这是一个按钮,点击会将表单信息提交到指定地址)
⑥reset 重置
⑦file 文件
⑧hidden 隐藏

二、method (表单数据提交的方式)

1.GET

信息拼接在地址后,信息不安全

<form action="http://www.jd.com" method="get">

在这里插入图片描述

2.POST

信息打包发送,信息安全

<form action="http://www.jd.com" method="get">

在这里插入图片描述

三、表格 table

1、标签
table——————表格
tr——————表格行
th——————表头
td——————单元

2、 css reset
①:table{border-collapse;}单元格间隙合并 ②:th,td{padding;}重置单元格默认填充`
3、单元格合并
①colspan 横向合并
②rowspan 纵向合并

合并技巧:1找(找到需要合并的单元格的位置以及合并几个单元格)2合(选择横向合并或纵向合并)3删除(删除溢出的单元格)

举报

相关推荐

0 条评论