前端——table标签和form标签和控件:table,input的type类型,select和option,label,textarea

文章目录

  • 表格标签 table
    • 用法
  • 表单标签 form
    • label标签
    • input元素
    • 用法

表格标签 table

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等

用法

  表格
  表格头
 表格行
 表格主体
 表格底部

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

前端——table标签和form标签和控件:table,input的type类型,select和option,label,textarea_第1张图片


    
标题行的单元格数据
表格内的单元格数据
星期一 星期二 星期三 星期四 星期五
上午 语文 数学 英文 生物 化学
语文 数学 英文 生物 化学
语文 数学 英文 生物 化学
下午 语文 数学 英文 生物 化学
语文 数学 英文 生物 化学
课程表

表单标签 form

form 标签是块级元素,action属性是要提交到服务端处理的网址,methon属性默认是get,如果是文件的话,method是post

label标签

是行内元素,label 用来关联文本和表达元素的,点击文本时相当于点击了表达元素。

鼠标移动到”用户名“三个字时,会变成箭头,点击用户名相当于点击了输入框,优化体验,




点击按钮会选中选项,点击”男“字也会选中




也可以这样写:

如果没有label则鼠标停留在字体上时会变成选择文本,点击无反应

input元素

可以设置宽高,行内块元素

input type 属性,name值提交表单的时候在url存在,id 值和lable for 绑定的
textarea

用法


    

用户名称:

用户密码:

确认密码:

用户性别:

用户爱好:

请上传文件:

自我介绍:

籍贯:

前端——table标签和form标签和控件:table,input的type类型,select和option,label,textarea_第2张图片

你可能感兴趣的:(前端)