如何使用HTML创建表格和表单

简介: 如何使用HTML创建表格和表单

如何使用HTML创建表格和表单

效果图



表格

定义表格

表格是用<table>元素来定义的如:
<table border=n align="alignment" bgcolor="clr">....</table>

属性border用于定义表格边框的宽度,n可以是从0开始的整数,设置border=0和忽略border属性,浏览器不会显示边框。

属性align用于设置表格个的对齐方式,alignment可以是left、center、或right。

属性bgcolor用于指定表格的背景色,采用英文red等等或者是十六进制表示。

<caption>元素用于定义表格的标题,如:
<caption>...</caption>
<td>元素用于定义单元格
<td>...</td>

表单

表单的创建

使用<form>元素,以及在其中嵌入相关的元素(控件)就可以创建HTML文档中表单
表单的基本语法
<form method="get of post" action="URL">
...
</form>

属性methed用于指定向服务器发送表单数据时所使用的的HTTP方法,可以是get或者post这两种方法中的一种

get是缺省的方法,当采用get方法提交表单时,提交的数据被附加到URL的末端,作为URL的一部分发送到服务器端。

post方法是将表单中的信息作为一个数据块发送到服务器端。无论采用哪一种方法,数据的编码都是相同的,格式为name1=value1&name2=value2.


属性action制定对表单进行处理的脚本地址。也就是说,表单提交到服务器后,交个谁来处理,在action属性中制定处理者的URL。

input元素

<input>元素用于接受用户输入的信息
语法:
<input type="type" name="name" size="size" value="value">

属性type用于指定要创建的控件的类型。属性name用于指定控件的名称,处理表单的服务器脚本可以获得以名称-值对应表示的表单数据,利用名称可以取出对应的值。name属性在表单中并不显示。属性size用于指定表单中控件的初始宽度。属性value用于指定控件的初始值。

单行文本输入控件(type="text")
提交按钮 type="submit"
重置按钮 type="reset"
口令输入控件 type="password"
单选按钮 type="radio"
复选康 type="checkbox"
隐藏控件 type="hidden"
单选按钮的name值如果是一致的则这是一组单选按钮
input默认的类型是text类型

列表框

列表框允许用户从一个下拉列表框中选择一项或者多项,功能和单选按钮和复选按钮相同,但显示的方式不一样。

列表框由<select>元素创建,列表框中的各个选项用<option>元素提供
如:
<select size="1" name="eduction">
        <option value="" selected>....</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
        <option value="博士">博士</option>
      </select><br>

多行文本输入控件

语法:
<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>

属性rows用于指定文本输入的文本行数,属性cols用于指定文本输入控件可视区域的宽度。在开始标签和结束标签之前出现的问本,将作为文本输入控件中的初始文本

实例

效果图



实例代码

<html>
  <head><title>表单的例子</title></head>
  <body>
    <form method="get" action="reg.jsp">
      用户名:<input type="text" name="user" size="20" ><br>
      密码:&nbsp&nbsp&nbsp<input type="password” name="pwd"><br>
      性别:<input type="radio" name="sex" value="1" checked>男
      <input type="radio" name="sex" value="0">女<br>
      兴趣爱好:
      <input type="checkbox" name="interest" value="football">足球
      <input type="checkbox" name="interest" value="baskeball">蓝球
      <input type="checkbox" name="interest" value="volleyball">排球
      <input type="checkBox" name="interest" value="swim">游泳<br>
      最高学历:
      <select size="1" name="eduction">
        <option value="" selected>....</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
        <option value="博士">博士</option>
      </select><br>
      个人简介:<textarea name="personal" rows="5" cols="30">个人简介</textarea><br>
      <input type="hidden" name="id">
      <input type="reset" value="重写">
      <input type="submit" value="提交">
    </form>
  </body>
</html>
目录
相关文章
|
1天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
2天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
7天前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
19 1
|
24天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
43 19
|
19天前
|
前端开发 JavaScript
用最少的代码实现一个HTML可交互表格
该HTML页面展示了一个可交互的表格,用户可以通过点击表格行来高亮显示所选行。使用了基本的`&lt;table&gt;`结构,并通过CSS设置了表格样式及行悬停效果。JavaScript函数`toggleSelect`实现了行选中的切换功能。
|
14天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
14天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
38 4
|
2月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!