表格和表单、表单的基本结构、表单元素、表单的高级应用、表单语义化

技能目标

  掌握表格的基本用法

  掌握表单的用法

  掌握CSS的高级选择器的用法

表格的基本结构  <table>

 行             <tr>

 列             

 单元格         <td>

 

表格的基本语法

 <table border=1px>

    <tr>               这里表示1行有2列

       <td>单元格1</td>

       <td>单元格2</td>

    </tr>

 </table>

 

表格的跨行和跨列

 <table width="100%" border="1">

   <tr>

     <td colspan="3">学院成线</td>   跨列

   </tr>

   <tr>

     <td rowspan="2">白杨</td>      跨行

     <td>语文</td>

     <td>98</td>

   </tr>

五行三列

<table border=”1”>

  <tr>

     <td colspan=”3”>三年级五班学院的语文成绩和数学成绩</td>

  </tr>

  <tr>

     <td rowspan=”2”>白杨</td>

     <td>语文</td>

     <td>98</td>

  </tr>

  <tr>

     <td>数学</td>

     <td>96</td>

  </tr>

  <tr>

     <td rowspan=”2”>杨晨</td>

     <td>语文</td>

     <td>92</td>

  </tr>

  <tr>

     <td>数学</td>

     <td>100</td>

  </tr>

</table>

表单是用来搜集用户数据

表单的应用场景

 表单在网页中的应用有哪些？

  注册、登录

  个人信息记录

  ....

表单的基本结构

表单元素：单选框，复选框，按钮，文本框，密码框，提交按钮...等

Action=”” 提交到该网站的服务器进行处理，检测用户是否存在...等

Action=”#”提交给本页面

Method=”post”表单数据以post提交

 

<form method=”get” action=”#”>

  用户名：<input type="text" name=”username”><br/>

  密码：<input type="password" name=”password”><br/>

  <input type="submit">  此处显示的是一个"提交"按钮，若要改按钮内的值则加属性value="登录"

</form>

填写用户名和密码按提交后，执行后呈现这样的效果：

结论：以get方式提交，表单的数据能通过地址栏获得。因此数据提交会不安全

若method=”post”,填写用户名和密码按提交后则效果为

结论：以post方式提交，表单数据并不是通过地址栏来传递的，因此表单数据是安全的

第一点是表单数据的安全，第二点是当表单数据过多的时候，例如需要注册时用到”性别”、”爱好”等，若以“get”方式提交，则地址栏会呈现一大长串的数据，但地址栏会有字节数限制，存在有些表单数据没传到的情况，出现数据不完整的情况。

So，在真正做表单提交的时候，post方式更常用，在与后台交互JavaScript等时通常用get

1、表单元素还有哪些属性？

2、还有哪些常用表单元素

 

表单元素

<input type="text" name="fname" value="text">

       类型         名称          值

这里的name，将来通过这个名称拿到对应的值

这里的value，指的是文本框默认的内容

Check复选框   radio单选框   reset重置按钮  file文件框

 

爱好：<input type="checkbox" name="hobby" value="1"/>吃

      <input type="checkbox" name="hobby" value="2"/>喝

      <input type="checkbox" name="hobby" value="3"/>嫖

      <input type="checkbox" name="hobby" value="4"/>赌

上传文件：<input type="file" name=”file”/>

重置<input type="reset"/>   变为表单的初始状态并不等于清空(例如：我原先在type=”text”还加上一个value=”请输入用户名”)

<input type="image" src="img/1.jpg"/>   定义图像形式的提交按钮，src指的是图像的路径

<input type=”button” >  普通的按钮并且框里面什么东西都没有，点击后无任何行为（可通过地址栏看看后缀是否有多加的数据），要使按钮框里有内容，在加入value属性

Size 指的是元素的宽度，即文本框或密码框的长度

而maxlength指的是内容限制的长度，即文本内容的长度

Checked=”checked”   这里前提条件是type为radio或checkbox时，然后这个选项导致网页的初始状态已经显示了那个默认选项。

注意：

1、<input type="radio"/>男<input type="radio"/>女

如果单单上面这行是起不了单选框的作用，即男 女都可以选，要想达到互斥的效果，这个时候需要给标签在加一个name属性

<input type="radio" name=”sex”/>男<input type="radio" name=”sex”/>女

2、当type的属性值是checkbox时，value的值是日后传输给数据库的，服务器拿到的是你选择的选项就比如是1和2（你选择了吃和喝）与当type的属性值是text时，value的值是显示默认的文本内容不同的

 

 列表框应用于下拉选项的，例：你所在的年级，选项有大一、大二、大三

 <select name="名称" size="行数">

 <option value="值" selected="selected">

  ...

 </option>

 <option value="值">...</option>

 </select>

Select标签代表列表框 selected=”selected”代表默认选中项（比如填写的这个居多，方便）option代表选项

多行文本域，例如应用在签网页的协议 我同意、个人简介

 <textarea name="showText" cols="x" rows="y">

          文本内容

 </textarea>

 textarea代表多行文本域，cols代表显示的列数，rows代表显示的行数

注意：多行文本域的”文本内容”和<input type=”text” value=”文本内容”>中的文本内容位置不一致

 

 表单的高级应用

 隐藏域

   type="hidden"

   只读

   readonly="readonly"

 禁用

   disabled="disabled"

<input type=”hidden”> 一般用于动态网页，运用在什么地方呢？

用户名：<input type=”text” value=”请输入用户名” readonly=”readonly”>

  这里鼠标点击后无光标没办法修改

<input type=”submit” value=”登录” disabled=”disabled”>

  这里网页的初始状态，这个按钮是灰色的不可点击状态，当填写完这个页面内容，这个状态还是灰色的。要想使其变为可点击状态，要用到JavaScript脚本与HTML相结合。

什么是表单语义化

 1、符合W3C标准

 2、语义化的标签

 3、结构合理、代码简洁

简而言之，每一个标签都有自己的含义、范围，选择最合适的标签搭配最合适的事

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

  这句话的效果是单击字“男”前面的圆圈或单击字“男”都能使圆圈勾选