HTML表单元素---思鹏代码库

2015/4/17 0:15:49 人评论 次浏览 分类:块级元素

表单元素

    简介

(一) 表单是一个包含表单元素的区域。

(二) 表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素 表单使用表单标签(<form>)定义

具体事例:

      <form>

        input 元素 (多数情况下被用到的表单标签是输入标签,输入类型是由类型属性(type)定义的) 

     </form>


文本域

     当用户要在表单中键入字母、数字等内容时,就会用到文本域。  

      <form>
              username: <input type="text" name="username"> 文本框
              userpass: <input type="password" name="password"> 密码框
              <textarea cols="2" rows="3"></textarea> 多行文本
      </form>

单选按钮

     当用户从若干给定的的选择中选取其一时,就会用到单选框。

       <form>
             <input type="radio" name="sex" value="男"> 男
            <input type="radio" name="sex" value="女"> 女
      </form>
复选框

    当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。

        <form>
             <input type="checkbox" name="sketch"> 素描
              <input type="checkbox" name="reading"> 读书
       </form>

Action和确认按钮


   确认按钮

      当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

        <form>
              <input type="submit" value="提交"> 提交按钮
              <input type="reset" value="刷新"> 刷新按钮
              <input type="button" value="按钮"> 普通按钮
       </form>

Action

      <!--该表单跳转到index.jsp--提交的方式是post-->
      <form action="index.jsp" method="post">
                username: <input type="text" name="username"> 文本框
                <input type="submit" value="提交"> 提交按钮
       </form>
  <select>标签

elect 元素可创建单选或多选菜单。

注:当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性

       <form>

	    <select name="book" id="reading">

		 <option value="1">Java</option>

		 <option value="2">Linux</option>

	    </select>

        </form>
属性 描述
disabled disabled 禁用该下拉列表
name name 下拉列表的名称
size number 下拉列表可见选项数目

 隐藏标签:

    简介

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

      <form>

        <input type="hidden" name="hide" value="value">

</form>

Label标签

   简介

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form> 

	<label for="nan">男</label> 

	<input type="radio" name="sex" id="nan"><br>

	<label for="nv">女</label>

	<input type="radio" name="sex" id="nv"><br>

	<label for="xq">篮球</label> 

	<input type="checkbox" id="xq">

</form>

表格

     简介

表格由 <table> 标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<table border="1">

             <tr>

                 <td>row(行1), cell(列1)<td />

             </tr>

              <tr>

              <td>row(行1), cell(列1)<td />

               <td>row(行1), cell(列1)<td />

                </tr>

</table>

共有访客发表了评论 网友评论

验证码: 看不清楚?