学习前端——表格、表单

表格在日常生活中使用的非常的多，比好excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如:课程表、银行对账单

在网页中也可以来创建出不同的表格。

上面的简历，就是通过html实现的
可以达到普通word的表单，但是实现起来相对于于word要麻烦的多

方法：

     1、在HTML中，使用table标签来创建一 个表格2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr 3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td4、table标签里有一些自带属性    border="1" width="40%" align="center" 5、rowspan用来设置纵向的合并单元格6、colspan横向的合并单元格

<table><tr><td rowspan="3" >家庭住址</td><td colspan="2" rowspan="3"></td><td>联系电话</td><td colspan="3"></td></tr><tr><td>个人微信</td><td colspan="3"></td></tr><tr><td>E-mail</td><td colspan="3"></td></tr>
</table>

设置表格的时候也需要注意样式

         border-collapse    [ka'laeps] //音标设置行和单元格的边是否合并如果设置了边框合并，则borde r-spacing自动失效可选值separate        默认值，不合并collapse      合并边框

有-些情况下表格是非常的长的
有一些情况下表格是非常的长的
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签

     thead  表头  永远在表格的头部tbody  表格的主体  永远在表格中间tfoot  表格的底部  永远在表格底部用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行需要通过tbody > tr

表单
将用户信息等本地的数据信息提交给服务器的

             比如：百度的搜索框 注册 登录这些操作都需要填写表单

1:创建表单 form标签

 属性：action属性（必须要写）指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

2:添加表单项

 使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项

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

type属性是text
name属性：提交内容的名字如果希望表单项中的数据会提交到服务器中，必须指定一个name属性
value属性值：作为文本框的默认值显示
input属性补充：1: autocomplete="off"  关闭自动补全2: readonly 设置为只读，不能修改3: disabled 设置为禁用4: autofocus  自动获取焦点5: placeholder 提示内容      用户名

 <input type="text" name="userName" value="张三" /><br /><br />

（2）input创建一个密码框

 type属性值是passwordname属性：提交密码的名字密码

<input type="password" name="passWord" />

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

 - type属性：radio- name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择- value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器      - checked="checked"属性  默认选中性别

 <input type="radio" name="gender" value="male" id="male" />男 <input type="radio" name="gender" value="female" checked="checked" id="female" />女

（4）input创建一个多选框

 -type属性:checkbox-checked="checked"属性  默认选中爱好

<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球

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

 -name属性设置给select，-value属性设置给option-selected="selected"，将选项设置为默认选中你喜欢的明星

<select name="star">在下拉列表中使用option标签来创建一个一个列表项<option value="zbs" selected="selected">赵本山</option><option value="fbb">范冰冰</option><option value="lxr">林心如</option>
</select>

在这里插入代码片

（6）textarea创建一个文本域

自我介绍

<textarea name="info"></textarea>

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

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

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

（8）创建一个重置按钮，type=“reset”

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

<input type="reset" />

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

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

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

（10）button标签来创建按钮

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

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

学习前端——表格、表单相关推荐

Web前端——表格表单练习
文章目录题目一:电子汇款单的制作源代码及效果展示题目二: 热门电影模板的制作源代码及效果展示题目三:用户注册页面的制作源代码及效果展示题目一:电子汇款单的制作要求: 源代码及效果展示 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...
python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...

学习前端——表格、表单

学习前端——表格、表单

学习前端——表格、表单相关推荐

最新文章

热门文章