学习前端——表格、表单

学习前端——表格、表单

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

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

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

方法：

		1、在HTML中，使用table标签来创建一 个表格
        2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr 
        3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
        4、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属性值是password
	name属性：提交密码的名字

密码

<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>