表格与表单

表格

table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单元格)。

为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分:表头、表身、表脚。
标签 说明
table 表格
caption 标题
thead 表头(语义划分)
tbody 表身(语义划分)
tfoot 表尾(语义划分)
tr 行
th 表头单元格
td 表格单元格

<table>
    <caption>考试成绩表</caption>
    
    <thead>
    <tr>
        <th>姓名</th>
        
        <th>语文</th>
        
        <th>英语</th>
        
        <th>数学</th>
        
    <tr>
    </thead>
    
    <tbody>
    <tr>
        <td>小明</td>
        
        <td>80</td>
        
        <td>80</td>
        
        <td>80</td>
        
    </tr>
    <tr>
        <td>小红</td>
        
        <td>90</td>
        
        <td>90</td>
        
        <td>90</td>
        
    </tr>
    
    <tr>
        <td>小杰</td>
        
        <td>100</td>
        
        <td>100</td>
        
        <td>100</td>
        
    </tr>
    
    </tbody>
    
    <tfoot>
    <tr>
        <td>平均</td>
        
        <td>90</td>
        
        <td>90</td>
        
        <td>90</td>
        
    </tr>
    
    </tfoot>
    
</table>

表格样式美化

<style>
table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
    
}


th, td {
     padding: 6px;
    color: blue;
    
}

表单

表单就是收集用户信息的,就是让用户填写的、选择的。

<div> <h3>欢迎注册本网站</h3>
    <form> 所有的表单内容,都要写在form标签里面</form>
</div>

form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

1.文本框

<input type="text" value="默认值" />
<input type="text" placeholder="提示" />

2.密码框

<input type="password"/>

3.单选按钮

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

input的type的值如果是radio就是单选按钮。
需要注意的是必须要有相同的name属性,单选按钮才能互斥。

label标签

<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label> 

input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框
4.复选框

<input type="checkbox" name="aihao"/> 睡觉 
<input type="checkbox" name="aihao"/> 吃饭 

复选框,最好也是有相同的name(便于服务器端收集用户选中的信息)。

5.下拉列表

<select>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select> 

select就是“选择”,
select标签和ul、ol、dl一样,都是组标签
option“选项”。

6.文本域

<textarea cols="20" rows="10"></textarea> 

cols属性表示columns“列”,
rows属性表示rows“行”。
值就是数字,表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字,一般不需要写字。

7.按钮

普通按钮

<input type="button" value="我是一个普通按钮" /> 

button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击,表单会提交到服务器。

重置按钮

<input type="reset" />

reset就是“复位”“重置”的意思,可以重置前面各个表单元素中填写的值。

只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly">

<input type="submit "  disabled="disabled"  value="保存" >
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...
    蛋炒饭_By阅读 223评论 0 0
  • 表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...
    __豆约翰__阅读 1,649评论 0 1
  • 表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...
    赵小莹阅读 480评论 0 0
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 4,365评论 2 5
  • 《灌篮高手》,承载着我们太多年少时的记忆,有多少人是因为《灌篮高手》而开始爱上了篮球。奋斗、梦想、永不放弃是这部动...
    喵丨小黑阅读 18,350评论 5 21