HTML_表单和表格基础语法

表单

语法

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

input元素

  语法

<input type="属性值" value="你好">

• input 输入的意思

• input是单标签元素

• type属性设置不同的属性值用来指定不同的控件类型

• 除了type属性还有别的属性

属性	值	说明
type	text	定义单行的输入字段
	button	定义可点击的按钮
	radio	定义单选按钮
	checkbox	定义复选框
	submit	定义提交按钮，提交页面数据
	file	文件框，用于上传文件
	hidden	定义隐藏的输入字段
	placeholde	文本框里面的提示字

label元素

语法

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

textarea元素

语法

<textarea >
  文本内容
</textarea>

value注意点：

1. 对于单选和复选框需要指定value属性的值用于区分用户选择了哪一个选项，显示在地址栏
2. 可以设置下拉选择框，里面的选择项option标签的值设置之后提交到后台用的是value，否则用的是标签体
3. 可以设置button，reset，submit，让他们在文本框中显示

select元素

语法

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

h5新增标签

label，如果在lable元素内点击文本，光标直接到文本框里面

button，必须加上type属性

表格

  语法

<table>
  <tr>
    <th>表头</th>
  </tr>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

1. table用于定义一个表格标签。

2. tr(table row) 用于定义表格中的行，必须嵌套在 table中

3. th(table head)用于定义表格中的表头, 必须嵌套在tr中

4. td(table data) 用于定义表格中的单元格，必须嵌套在tr中

table的常用属性

  

属性	值	说明
align	left center right	规定表格相对周围的对齐方式
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格的颜色
border	px	规定表格边框的宽度
cellpadding	px %	单元格的边框盒与其内容之间的空白
cellspacing	px %	单元格的间距
colspan	跨列合并	colspan="合并单元格的个数"
rowspan	行合并	rowspan="合并单元格的个数"

示例

<table width="600px" border="1" cellspacing="0">
  <caption>
    xx中学高一课程表
  </caption>
  <tr>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
  </tr>

  <tr>
    <td>语文</td>
    <td>地理</td>
    <td>语文</td>
    <td>地理</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>美术</td>
    <td>语文</td>
    <td>政治</td>
    <td>微机</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>生物</td>
    <td>语文</td>
    <td>生物</td>
    <td>微机</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>体育</td>
    <td>班会</td>
  </tr>
</table>

标题

  语法

<table>
   <caption>我是表格标题</caption>
</table>