html表单详解

2017/6/24 21:41:03Chixm13 阅读0 点赞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>标签

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

评论区