html文本框获取表格内容,html表格、表单

知识点一:表格

1、表格标签  table

2、表格的组成  行 tr  单元格  td

3、建立表格步骤

1、建立表格,

2、判断行数和列数

3、用行去包含单元格

4、在每个单元格中去添加内容

4、表格的各大属性

cellspacing:边框与边框之间的距离

cellpadding:单元格内容与边框之间的距离

border:表格的边框

width:表格的宽

height:表格的高

6、表格的结构:

标题:caption标签

表头:thead标签 表格的第一行,一般用来描述每一列所显示的内容,用thead标签讲第一行包起来,然后用th替换td,单元格中的内容相对于单元格水平居中,且加粗

表格主体:tbody标签

7、表格的标题,caption只在表格中使用

8、表格的缺点:

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

知识点二:合并单元格

1、分类:跨行合并、跨列合并

2、步骤

1、判断是跨行合并还是跨列合并

2、跨行合并用rowspan属性,跨列合并用colspan属性

3、将属性写在需要合并的单元格上

4、将合并的行数或者列数写在对应的属性值中

5、将多余的单元格注释掉

知识点三:表单

1、作用:显示、存储、提交数据

2、组成:表单域、表单标签、提交按钮

表单标签:action:表单向后台提交的地址

method:向后提交的方式 get  post

表单域:表单中的元素  (包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框)

input控件

1、普通的文本框   type = text

获取焦点:光标放在输入框内,可以打出文字

单击指定名字获取焦点需要将label标签中的属性值与input输入框的属性值保持一级即可

密码框 :type=post

单选框:type =radio

多选框:type=checkbox

普通按钮:type=button

提交按钮:type=submit

重置按钮:type=reset

2、 value:输入框的值

3、  placeholder:提示信息

4、 默认单选选中 1、checked="checked

2、checked

3、checked=true

5、多选框:默认多选选中 1、checked="checked”

2、checked

3、checked=true

6、选择框默认选中1、selected=”selected”

2、selected

3、selected=true

7、label标签

label标签为input元素定义标注(标签)。

lable作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。

8、textarea控件

如果需要输入大量的信息,就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在表单中添加到表格,您可以按照以下步骤操作: 1. 在HTML中创建一个表单,并在其中添加表单控件,例如文本框、下拉列表和单选按钮等。 2. 在表单控件中添加“name”属性,以便在提交表单时能够识别控件的值。 3. 在HTML中创建一个表格,并为其添加表头和行。 4. 在表格中使用JavaScript代码,以便在提交表单时将表单数据添加到表格中。 以下是一个示例代码,用于将表单数据添加到表格中: ``` <!DOCTYPE html> <html> <head> <title>添加表单数据表格</title> <script> function addRow() { // 获取表单中的值 var name = document.getElementById("name").value; var age = document.getElementById("age").value; var gender = document.querySelector('input[name="gender"]:checked').value; var country = document.getElementById("country").value; // 获取表格对象并创建一行 var table = document.getElementById("myTable"); var row = table.insertRow(); // 创建单元格并添加到行中 var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); // 将表单数据添加到单元格中 cell1.innerHTML = name; cell2.innerHTML = age; cell3.innerHTML = gender; cell4.innerHTML = country; } </script> </head> <body> <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="age">年龄:</label> <input type="text" id="age" name="age"><br><br> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="男"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="女"> <label for="female">女</label><br><br> <label for="country">国家:</label> <select id="country" name="country"> <option value="中国">中国</option> <option value="美国">美国</option> <option value="日本">日本</option> </select><br><br> <input type="button" value="添加" onclick="addRow()"> </form> <table id="myTable"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>国家</th> </tr> </table> </body> </html> ``` 在上面的代码中,我们首先创建了一个包含表单控件和表格HTML页面。然后,在JavaScript代码中,我们定义了一个“addRow()”函数,该函数在单击“添加”按钮时被调用。此函数使用“getElementById()”方法获取表单中的值,并使用“insertRow()”和“insertCell()”方法将这些值添加到表格中的新行中。最后,我们在表格中创建了一个表头。 您可以将上述代码复制并粘贴到HTML文件中,并在浏览器中打开该文件以查看示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值