html表单详解

陌上花 2017-06-24 21:41:03

分类： HTML/CSS 2985 0

表单的元素：

1.单行文本框<input type="text"/>（input 的type 属性的默认值就是"text"）

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

<input type = “text” name=“名称”/>

以下是单行文本框的主要属性：
size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。
value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击<input type="reset"/>按钮之后在文本框中显示的值。
maxlength：指定用户输入的最大字符长度。

2.多行文本框<textarea></textarea>

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
readonly属性定义多行文本框为只读。
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。 Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

3.密码框<input type="password"/>

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

<input type=“password” name=“名称”/>

4.单选按钮<input type="radio"/>

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女">女

属性解释：
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

5.复选框<input type="checkbox"/>

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

<input type="checkbox" name="chkhobby" value="吃" checked>  
<input type="checkbox" name="chkhobby" value="喝">  
<input type="checkbox" name="chkhobox" value="玩">  
<input type="checkbox" name="chkhobox" value="乐" >

属性解释：
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值

6.隐藏域<input type="hidden"/>

隐藏域通常用于向服务器提交不需要显示给用户的信息。

<input type=“hidden” name=“隐藏域”/>

属性解释：
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值

7.文件上传<input type="file"/>

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件

<input type="file" name="txtfile" size="15">

注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
属性解释：
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

8.下拉框<select>标签

下拉选择框允许你在一个有限的空间设置多种选项。与嵌套的

<select name="sel" size="3" multiple>  
                <option value="深圳">深圳</option>  
                <option value="北京">北京</option>  
                <option value="上海">上海</option>  
                <option value="广州" selected>广州</option>  
            </select>

属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。

9.<label></label>标签

在<input type=“text”>前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for=“txt1” >内容</label>；”,然后按下alt+u(了解)。accesskey=“u“，label的另一个属性。注意：要为被修饰的控件设置一个唯一的id。我觉得<label></label>标签对<input type="radio"/>和<input type="checkbox"/>这两个标签是非常有用的。

<input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
<input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>

10.<fieldset></fieldset>标签

fieldset标签将控件划分一个区域，看起来更规整。

<fieldset name="filed">  
            <legend>请输入个人信息</legend>  
                用户名称：<input type="text" name="txtUsename" value="请输入用户名称" >  
                <br/>  
                用户密码：<input type="password" name="txtUsepwd" >  
        </fieldset>

11.提交按钮<input type="submit"/>

当用户单击<inputt type="submit"/>的提交按钮时，表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。　

<input type="submit" value="提交"/>

属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；

12.重置按钮<input type="reset"/>

当用户单击<input type="reset"/>按钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。

<input type=“reset” value=“重置按钮"/>

属性解释：
type="reset"定义重置按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；

13.普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

表单实例代码：

<!DOCTYPE html>  
<html>  
<head>  
<title>Day905</title>  
<meta charset="utf-8">  
</head>  
<body>  
<form>
<!--文本框--> 
<p>  
用户名称：<input type="text" name="txtUsename" value="请输入用户名称" readonly>  
</p>  
<p>  
用户密码：<input type="password" name="txtUsepwd" >  
</p>  
<!--单选框-->  
<p>  
用户性别：<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女" checked>女       
</p>  
<!--复选框-->  
<p>  
用户爱好：
吃<input type="checkbox" name="chkhobby" value="吃" checked>  
喝<input type="checkbox" name="chkhobby" value="喝">  
玩<input type="checkbox" name="chkhobox" value="玩">  
乐<input type="checkbox" name="chkhobox" value="乐">  
</p>  
<!-- 按钮 -->  
<p>  
<input type="submit" name="btnsbt" value="提交">  
<input type="reset" name="btnrst"    value="重置">  
<input type="button" name="btnbtn" value="普通按钮">  
</p>  
<!-- 隐藏域 -->  
<p>  
<input type="hidden" name="txtID" value="407862858@qq.com">  
</p>  
<!--文件选择框-->  
<p>  
请上传文件：<input type="file" name="txtfile">  
</p> 
<!--下拉列表-->  
<p>意向工作城市：  
<select name="sel" >  
<option value="深圳">深圳</option>  
<option value="北京">北京</option>  
<option value="上海">上海</option>  
<option value="广州" selected>广州</option>  
</select>  
</p>  
</form>  
</body>  
</html>