HTML表单

作者: 鲁智深 分类: HTML 发布时间: 2013-09-08 23:44

表单可以是说htnl中间最为重要的一个章节,因为它是一个html里面唯一一个能与后台进行交互的元素块。

表单的分类

一、用户登录注册

二、搜索

三、跳转菜单(ps:跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选)

表单元素

定义和用法

<from>标签用于为用户输入创建HTML表单。

表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含menus、textarea、fieldset、legend和label元素。

表单用于向服务器传输数据。

表单元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
   TODO <form> 标签表示为表单
   TODO * 作用 - 向服务器端发送用户输入的内容(数据)
   TODO * 属性
   TODO   * action - 表示提交表单的地址
   TODO   * method - 表示提交表单的方式
   TODO     * get
   TODO     * post
   TODO   * enctype - 表示提交表单的MIME类型
   TODO * 组件
   TODO   * 一般情况下,被定义在表单中(<form>标签中)
-->
<form action="" method="" enctype=""></form>

案例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<form action="" method="" enctype="">
              姓名:<input type="text" name="xingming"  value="木子"/><!--文本域-->
                            <br/><br/>
                       密码:<input type="password" name="mima"/><!--密码-->
                            <br/><br/>
                           重复密码:<input type="password" name="chongfumma"/><!--密码-->
                            <br/><br/>
                       性别:男<input type="radio" name="sex" value="0" checked="checked"/>女<input type="radio" name="sex" value="1"/><!--单选框-->
                            <br/><br/>
                               来本博客目的:
                               <select name="mudi[]" size="5" multiple="multiple" disabled="disabled">
                                 <option value="gaoshou">博主是个高手</option>
                                 <option value="diaosi">博主是个屌丝</option>
                                 <option selected="selected">博主是个砖家</option>
                               </select>
                            <br/><br/>  
                   爱好:足球<input type="checkbox" name="zuqiu[]" value="zuqiu"/>
                        乒乓球<input type="checkbox" name="qbq[]" value="qbq"/>
                        看书<input type="checkbox" name="kanshu[]" value="kanshu"/>
                        购物<input type="checkbox" name="gouwu[]" value="gouwu"/><!--复选框-->
                            <br/><br/>
                      <textarea></textarea>
                            <br/><br/>
                      <input type="submit" value="注册" name="zhuce"/><!---提交按钮-->
                            <br/><br/>
                      <input type="file"/><!--文件上传域-->
                            <br/><br/>
                      <input type="reset"/><!---重置按钮-->
                            <br/>
                      <input type="button"/><!--按钮-->
                            <br/>
                      <input type="image"/><!---相当于提交,不建议使用-->
                            <br/>
                      <input type="hidden"/><!---隐藏域-->
                        <br/>
                      <textarea></textarea>><!---文本域-->
                      <select><!---下拉列表-->
                           <option value="">apple</option>
                           <option value="">小米</option>
                           <option value="">锤子</option>
                      </select>
</form>

注:value为控制按钮显示文字,表单功能制作需要设计到数据库调用,所以想要制作出功能强大并且符合用户体验的表单,还需要慢慢研究!

表单组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<form action="#">
    <!--
        TODO <input> 标签表示输入框
        TODO * value - 表示输入框的值
        TODO   * 输入框所输入的文本内容
        TODO * type - 表示输入框的类型
        TODO   * text - 表示文本输入框
        TODO   * password - 表示密码框
        TODO   * button - 表示按钮
        TODO   * reset - 表示重置按钮
        TODO     * 将表单内组件内容清除效果
        TODO   * submit - 表示提交按钮
        TODO     * 将当前的表单提交给指定的地址(action
        TODO   * radio - 表示单选框
        TODO     * 表示一组单选框(name属性)中只能选择一个
        TODO   * checkbox - 表示多选框
        TODO     * 表示一组多选框,允许选择多个
        TODO   * file - 表示文件域
        TODO     * 作用 - 允许选择本地的文件(默认不限制类型)
        TODO     * 用途 - 多用于文件上传
        TODO   * hidden - 表示隐藏域
        TODO     * 不会被显示在页面中(用户看不到)
        TODO     * 作用 - 用于存储一些不希望被用户看到的数据
    -->
    文本输入框:<input type="text" value="this is text"><br>
    密码框:<input type="password"><br>
    <hr>
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <hr>
    <input type="radio" name="like">JavaScript
    <input type="radio" name="like">html
    <input type="radio" name="like">css
    <br>
    <input type="checkbox" name="love">JavaScript
    <input type="checkbox" name="love">html
    <input type="checkbox" name="love">css
    <hr>
    <input type="file">
    <hr>
    <input type="hidden">
</form>

提交表单

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!--
    TODO 实现提交表单的功能
    TODO * 定义<form>标签,并且定义表单组件
    TODO * 必须定义提交按钮(submit)
    TODO   * 必须配合<form>标签的action属性使用

    TODO http://localhost:63342/code/05_提交表单.html
    TODO * 实际上,是当前HTML页面的绝对路径
    TODO http://localhost:63342/code/05_提交表单.html?user=zhangwuji#
    TODO http://localhost:63342/code/05_提交表单.html?user=zhangwuji&pwd=12345#

    TODO method - 表示提交表单的方式
    TODO * get - 默认方式,表单的所有请求数据被添加在请求地址中
    TODO   * 请求地址(在标准规范中是有限制的)
    TODO     * 大小限制 - 无法添加数据量较大的内容
    TODO     * 未加密(明文)
    TODO * post - 一般建议使用这种
    TODO 面试题
    TODO * 提交表单的方式至少两种,分别是get和post
    TODO * 提交表单的方式常用是七种
    TODO * RESTFul API(标准式API)
    TODO   * get - 获取
    TODO   * post - 修改
    TODO   * put - 新增
    TODO   * delete - 删除
-->
<form action="#" method="get">
    <!-- TODO <input>标签必须定义 name 属性 -->
    <input type="text" name="user">
    <input type="password" name="pwd">
    <br>
    <!--
        TODO http://localhost:63342/code/05_提交表单.html?user=zhangwuji&pwd=12345&like=on#
        TODO * 单选框或多选框定义有效的提交表单功能
        TODO   * 定义 value 属性 - 每个单选框定义不同的 value 属性值
    -->
    <input type="radio" name="like" value="1">JavaScript
    <input type="radio" name="like" value="2">html
    <input type="radio" name="like" value="3">css
    <br>
    <!-- TODO type=hidden 与其他 <input> 使用基本保持一致 -->
    <input type="hidden" name="username" value="zhangwuji">
    <br>
    <!--
        TODO * <select>标签定义 name 属性
        TODO * <option>标签定义 value 属性
    -->
    <select name="phone">
        <option value="1">苹果</option>
        <option value="2">小米</option>
        <option value="3">锤子</option>
    </select>
    <input type="submit" value="提交">
</form>

下拉列表

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="#">
    <!--
        TODO <select>标签表示下拉列表
        TODO * 默认 - 表示下拉单选框
        TODO * 属性
        TODO   * id - 表示标识
        TODO   * name - 表示名称
     -->
    <select>
        <!--
            TODO <option>标签表示下拉列表的选项
            TODO * value - 表示值
         -->
        <option value="">apple</option>
        <option value="">小米</option>
        <option value="">锤子</option>
    </select>
    <br>
    <!--
        TODO <select>标签 - 下拉多选框
        TODO * 属性
        TODO   * size - 表示下拉列表默认显示选项的个数
        TODO   * multiple - 表示多选
    -->
    <select size="5" multiple="multiple">
        <option value="">苹果</option>
        <option value="">西瓜</option>
        <option value="">香蕉</option>
    </select>
</form>

下拉框多选属性

multiple

用法:

1
<select name="mudi" size="20" multiple="multiple">

文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--
    TODO 提交表单的方式
    TODO * get - 只是将文件名称发送给服务器端
    TODO   * 没有实现文件上传功能
    TODO * post - 只是将文件名称发送给服务器端
    TODO enctype属性
    TODO * application/x-www-form-urlencoded - 是<form>标签的默认值
    TODO   * 专门用于提交表单组件的内容(数据)
    TODO * multipart/form-data - 用于文件上传
-->
<form action="#" method="post" enctype="multipart/form-data">
    <!--
        TODO <input type=file>
        TODO * 默认 - 只能选择一个文件
        TODO * 选择多个文件 - multiple 属性,默认属性就是multiple,所有直接写multiple也可以
    -->
    <input type="file" name="file" multiple>
    <!-- <input type="file" name="file" multiple="multiple"> -->
    <input type="submit" value="上传">
</form>

按钮效果的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input元素</title>
</head>
<body>
<form action="#">
    <!--
        TODO <input>实现按钮效果
        TODO * 与表单相关的按钮效果
     -->
    <input type="button" value="按钮">
    <!--
        TODO <button>标签表示按钮
        TODO * 与表单无关的按钮效果
        TODO * 类似于<input type="submit"> - 提交表单
     -->
    <button>按钮</button>
    <br>
    <!--
        TODO <input type="image">
        TODO * 基本用法 - 也可以显示图片
        TODO * 鼠标点击图片时 - 也有提交表单的作用
    -->
</form>
<button>按钮</button>
<br>
</body>
</html>

表单中图片显示

1
<input type="image" src="imgs/girl.jpg">

文本框默认值属性

value

用法:一般来说这个value就是用于写死密码,比如在登录注册时“保存用户名密码”比较常用。

1
2
姓名:
<input type="text" name="xingming" value="爱映疯" />

单选框默认选中属性

默认选中

checked

用法:

1
<input type="radio" name="sex" value="0" checked="checked" />

disabled禁用input元素

disabled

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <form action="" method="" enctype="">
            <select  disabled="disabled"><!---下拉列表-->
                 <option value="">apple</option>
                 <option value="">小米</option>
                 <option value="">锤子</option>
           </select>
    </form>
    <form action="form_action.asp" method="get">
         <p>First name: <input type="text" name="fname" /></p>
         <p>Last name: <input type="text" name="lname" disabled="disabled" /></p>
         <input type="submit" value="Submit" />
    </form>

    <input class="has-border" id="signup-username" type="text" disabled="disabled" value="$username">

隐藏注册密码

method=”post”

用法:

1
<form action="#" method="post"></form>

如何把表单的值传到数据库

标签:name=”mudi[]”

代码:

1
<select name="mudi[]" size="5" multiple="multiple" disabled="disabled">

如何定义字数大小

标签:size=”5″(ps:意思5个字符高度)

代码:如上

如何定义文本输入控件长、宽、换行

标签:textarea(文本框)cols(列)rows(行)wrap(换行)

代码:

1
2
3
4
5
6
7
8
9
10
<form action="#">
    <!--
       TODO <textarea>标签表示文本域
       TODO * 属性
       TODO   * cols - 表示列
       TODO   * rows - 表示行
       TODO   * wrap - 换行
   -->
   <textarea name="wenben[]" cols="1" rows="5" wrap="virtual" wrap="physical" ></textarea>
</form>

wrap=”virtual”浏览器默认换行并且传到服务器,服务器不显示换行

wrap=”physical浏览器默认换行并且传到服务器,服务器显示换行

input(textbox)表单不保存历史记录的方法

在input里autocomplete=”off”属性,这种方法IE 和 firefox通用.是一种不错的方法

1
<input name="test" type="text" id="test" autocomplete="off"/>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注