前端笔记4-表格,表单

1.表格

table是一个块元素

1.创建一个表格时,如果没有指定tbody,则浏览器会在页面中自动添加tbody,并且将所有的tr都放到tbody中
一定要注意,默认情况下tr是tbody的子元素,而不是table的子元素。

2.rowspan表示纵向合并单元格,colspan表示横向的合并单元格



    








  
  
  
  
  
  








日期 收入 支出 合计
2017.1.4500400100
合计 500

2.表单

在网页中,我们通过表单来向服务器提交信息 在网页中使用form标签来创建一个表单,form中还必须有一个action属性
action需要的是一个服务器的地址,这样当提交表单时,我们所填写的信息将会提交到action对应的地址

  
文本框
1. 使用input标签来创建一个文本框,文本框需要一个type属性,属性值是text
2. 如果希望表单中的内容会提交到服务器中,还必须为元素指定一个name属性,当添加了name属性以后,填写的内容才会被提交到服务器
3. 用户填写的内容,默认会以查询字符串的形式发送给服务器,username=admin&password=123123,
查询字符串实际上就是一个名值对结构,名字就是表单项的name属性值,而值是用户填写的内容,多个名值对之间使用&连接
这样数据发送给服务器以后,服务器就可以根据name来获取用户填写的值
   用户名 
密码
单选按钮
1. 使用input标签来创建单选按钮,它的type属性值是radio
2. 单选按钮需要通过name属性进行分组,name属性值相同属于一组
3. 像这种选择框,不需要用户填写内容的,还必须指定一个value属性 ,
如果指定了value属性,则当提交表单时,value属性的值将会提交到服务器
4. 如果需要设置某个单选按钮或多选框为默认选中状态 可以在元素中添加一个属性checked="checked"
性别
多选框
  1. 使用input来创建多选框,它的type属性是checkbox
爱好 篮球
羽毛球
乒乓球
下拉列表
1. 使用select标签来创建一个下拉列表
2. 使用option标签来向下拉列表中添加选项
3. name属性需要指定给select,value需要指定给option
4. 在select标签中还可以使用optgroup来对选项进行分组
5. 可以通过为option添加一个属性 selected="selected" 来将其设置为默认选中
6. 如果在select中添加一个 multiple="multiple" ,则下拉列表会变成多选的下拉列表
 提交按钮:提交按钮可以将表单中的信息提交到服务器
重置按钮:可以将表单恢复到默认状态
按钮:这个按钮只有一个功能就是被点
不同的是button是成对的标签,而input是自结束标签,
相比来说button标签更灵活一些
      



      
      
   



你可能感兴趣的:(前端笔记4-表格,表单)