表格标签、表单标签

曾经终败给现在 2022-08-31 11:04 336阅读 0赞

# 表格标签、表单标签 #

### 文章目录 ###

*  表格标签、表单标签
 *   *   *  表格标签\`\`
            
            <table></table>
         *  表单标签

### 表格标签`<table>` ###

`<table>`标签表示表格，`<tr>`表示表格中的行，`<td>`表示表格中的单元格。`<th>`表示表头。

单元格td必须设计在tr中，th也必须在tr中

table中的一些属性：

单元格跨列：colspan。

单元格跨行：rowspan。

内容和单元格之间的间距：cellpadding。

单元格间的间距：cellspacing。

html5中将表格用```<thead>``<tbody>```和`<tfoot>`划分成表头，主体和底部，只进行语法意义上的区分，默认没有显示效果。

### 表单标签 ###

`<form>`标签表示表单

form的属性：action：表示提交的服务器地址

method：表示提交方式（GET/POST)

GET：默认提交方式，将提交的信息放置在url之后，传递信息的大小有限制

POST：将信息用隐藏的方式提交给服务器，相对安全

表单项：

*  input:
    
    type属性的值不同，表单项的类型不同。
    
    1.  type=“text”,表示文本框。
    2.  type=“password”,表示密码框。
    3.  type=“submit”,表示提交按钮。
    4.  type=“reset”,创建重置按钮，会将表单恢复到默认状态
    5.  type=“button”，创建一个按钮。
    6.  type=“image”，属性src为图片的路径，此刻图片具有点击功能，点击后功能由JS实现。
    7.  type=“radio”,表示单选按钮（name的值相同的为同一组单选按钮，互斥）。
    8.  type=“checkbox”,表示复选框（name的值相同的为同一组复选框）。
        
        radio和checkbox中的value框为向服务器提交的信息。
        
        checked=“checked”：默认选中。
        
        name属性：服务器通过name的值获取提交的信息。
        
        value属性：表示submit按钮的文本信息，在文本框和密码框中value属性为默认值。
 *  label：将表单项和提示信息进行绑定 。for属性值=需要绑定元素的id值。
 *  select标签：使用select标签创建下拉列表，使用option创建列表项。
    
    下拉列表的name属性指定select标签，value属性值指定option标签。
    
    下拉列表使用selected="selected"表示默认选中。
    
    使用multiple="multiple"表示多选。
    
    使用optgroup对option进行分组，使用label设置组名称。
 *  textarea创建多行文本框（文本域），cols设置列（宽），rows设置行（高）。
 *  可以使用button创建提交按钮，可使用修改功能，如submit、reset、button等

使用`<fileset>`标签对表单项进行分组，`<legend>`标签表示分组名称。

隐藏域 ：使用type=“hidden”，浏览器看不到

禁用：disabled=“disabled”

只读：readonly=“readonly”