html----表单元素

• 表单元素

博客主要内容

• 列表标签：<ul>、<ol>、<dl>

• 表格标签：<table>

• 表单标签：<form>

 

• 列表标签

  • 无序列表：<ul type = “  ”>　　

 

<ul>
         <li>皮卡丘</li>    
         <li>喷火龙</li>    
         <li>杰尼龟</li>     #<li>表示列表项的意思，且<li>只能出现在列表中。
</ul>

 

• 属性值： disc(实心原点，默认)，square(实心方点)，circle(空心圆)　

• 列表中间是可以嵌套的。

• ul的里面只能放<li>,但<li>是一个容器级标签，所以什么都可以放。

 

• 有序标签：<ol  type = " ">
• 属性值：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。


 

• 定义标签：<dl>
  • 定义列表没有属性值；
  • <dl>的元素只能是<dt>、<dd>,同样，<dt><dd>必须在<dt>里。
    且<dt>是必须的而<dd>可以没有。另外<dd>必须在<dt>内　

 

• 表格标签<table>

  • 定义：一个<table>是有 多个<tr>组成的，而每个<tr>是由多个<td>组成的。　　

<table>
        <tr>
            <td>姓名</td>
            <td>所属地区</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>阿旭</td>
            <td>山东</td>         #<th>相当于<td>+ <b>:表格中的字符加粗
            <td>打游戏</td>
        </tr>
        <tr>
            <td>大脑袋</td>
            <td>山东</td>
            <td>撩妹</td>
        </tr>
    </table>           #有几行就有几个<tr>,有几列就有几个<td>

• <captain>表格标题：使用的时候与<tr>并列

 

• <table>属性
• border="1"：边框。像素为单位；
• style="border-collapse:collapse;"：单元格的线和表格的边框线合并；
• width：宽度。像素为单位
• height：高度。像素为单位
• bordercolor：表格的边框颜色
• align：表格的水平对齐方式。属性值可以填：left right center。指表格的整体位置
• cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
• cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0。
• bgcolor：表格的背景颜色
• background = “路径src/”:背景图片。　

 

• <tr>：行的属性
  • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）；
  • bgcolor：设置这一行的单元格的背景色。
    注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
  • height：行的高度
  • align：行内容的排列方式；
  • valign：一行的内容垂直居中，取值：top、bottom、middle。

 

• • <td>：行内单元格的属性　
    • align：单元格内容的横向对齐方式。属性值可以填：left right center。
    • valign：单元格内容的纵向对齐方式，可以填top、middle、bottom。
    • width：
    • height：单元格的高度
    • bgcolor：设置这个单元格的背景色
    • background：单元格的背景图片

 

• • 单元格的合并　　

　

• • • 横向合并：colspan。。
    • 纵向合并：rowspan：　　　　　　　　

　　　　　　

• • 表格的<thead>、<tbody>、<tfoot>：

• • • • 如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。
        如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示　　　　　　　　　　

 

• 表单标签<form>　　　

  • 表单标签是用于与服务器交互，收集用户信息。
  • 表单属性

• • • name：表单名称，用于JS操作或控制表单时使用。
    • id：表单名称，用于JS操作或控制表单时使用。
    • action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”。表单提交到哪。。
    • method：表单数据的提交方式，一般取值：get(默认)和post。　
      • • get方式
          • 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
            特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
        • post方式
          • 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
            特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

 

 

 

• • <input>输入标签（文本框）：用于接受用户输入
    • 输入标签的属性
      • type=“属性值”：
        1. text（默认）
        2. password：密码类型
        3. radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
           ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
        4. checkbox：多选按钮，名字相同的按钮作为一组进行选择。
        5. checked：用于将单选按钮或者多选按钮中将某个值设为默认状态。
        6. button：普通按钮，结合js代码进行使用；
        7. hidden：隐藏框，在表单中包含不希望用户看见的信息。
        8. submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。
           这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。　
        9. reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
        10. image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
        11. file：文件选择框
      • value= “内容”：文本框里默认内容
      • size = “50”：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。注意size属性值的单位不是像素哦。
      • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
        用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。　
      • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。　　

　　　　

• • <select>下拉列表标签
    • • <select>标签里面的每一项用<option>表示，select就是选择，option“选项”
      • <select>属性
        • multiple：可以对下拉列表中的选项进行多选。没有属性值。
        • size= “3，如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图　　

　

• • • • <option>标签的属性
        • selected：预选中，没有属性值。

　　

• • <textare>标签：多行文本输入框　　
    • 属性　
      • value：提交给服务器的值。
      • rows = “4”：指定文本区域的行数
      • cols = “20”：指定文本区域的列数
      • readonly：只读　　　　　

 

• • 表单的语义化

　

<form>

        <fieldset>
        <legend>账号信息</legend>
        姓名：<input value="呵呵" >逗比<br>
        密码：<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其他信息</legend>
        性别：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

    </form>

 

显示结果：

 

• • <lable>标签　

例：

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

 

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

 

解决如下：

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

上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。