HTML笔记（二） 表格和表单

1、表格：<table> 

                             <caption>表格标题</caption>

                             <thead><tr><th>姓名</th><th>性别</th></tr> </thead>

                             <tr><td>小明</td><td>男</td></tr>

               </table>

（1）表格属性：

               单元格和单元格之间的距离：cellspacing="10"；

               单元格内容距离单元格边框的距离：与cellpadding="10"；

               border=“0”；

               实际应用一般三参为0。

（2）表格合并单元格：

         跨行合并：rowspan;  跨列合并：colspan;

              <table> 

                             <caption>表格标题</caption>

                             <thead><tr><th>姓名</th><th>性别</th></tr> </thead>

                             <tr>

                                   <td>小米</td>

                                   <td colspan="2">小凯</td>

                              </tr>

                              <tr>

                                   <td>小米</td>

                                   <td rowspan="2">小凯</td> 

                              </tr>

                              <tr>

                                   <td>小米</td>

                              </tr>

               </table>

 

2、form表单的表单元素：

    （1）< input />单标签

            <input  type="text" />  //type="text"单行文本框

                                                      type="password"密码输入框

                                                      type="radio"单选按钮框，

                                                                 （选性别时用，放在一组时候要给他们命名，多选一）

                                                      type="checkbox"复选框

                                                      type="button"普通按钮

                                                      type="submit"提交按钮

                                                      type="reset"重置按钮

                                                      type="image"图像形式的提交按钮

                                                      type="file"文本域，上传头像用

            <input  name="file"/>  //上传头像的按钮

            <input  type="text"  value=“北京”/> //value文本默认输入的值

            <input  type="text"  name="男"/> //用户自定义控件的名称

            <input  type="radio"  name="女" checked="checked"/> //默认选中

             size、maxlength等属性还可设置input表单值的大小等。

 

      （2）label标签为input元素定义标注：

               当用户用该标签包含input内容时，鼠标会自动将焦点放到输入框

               <label>用户名：<input type="text"></label>

      

       （3）textarea文本域：

               a. textarea获取值：

                 <textarea  id="failureReason"name="failureReason" >${(faultCodeVo.failureReason)!''}</textarea>

 

               b. textarea 标签必须一行写完，隔行获取的值会出现前面有空格情况

                正确写法：<textarea>内容。。。。。。。。</textarea>

         

       （4）下拉菜单：

               <select>

                        <option>年份</option>

                        <option selected="selected">1995年</option>//默认选中

                        <option>1996年</option>

               </select>

       （5）表单域：

                <form action="提交表单内容的地址" method="get/post"> 

                          <input type="submit" value="提交按钮"/>//按钮在form域内生效

                          <input type="reset" value="重新填写"/>//按钮在form域内生效

                </form>

 

平时可查阅文档：w3school/MDN