03-HTML-form-input

html表单元素form 及表单输入域input

1. 作用

将用户输入的数据提交给服务器.

2. 语法

<form

action="url"

method="提供方式"

enctype="编码类型"

>

...

</form>

3. 说明

1) method

提交方式(很多种)

①get (默认)

②post

2) enctype

提交给服务器之前进行编码的类型

①application/x-www-form-urlencoded

在发送前编码所有字符（默认）

②multipart/form-data

不对字符编码。

在使用包含文件上传控件的表单时，必须使用该值。

③text/plain

空格转换为 "+" 加号，但不对特殊字符编码。

4. <input>

4.1 type

① text 文本框

② password 密码框

③ checkbox 复选框

④ radio 单选框(以name来分组)

⑤ image 图片 (替代submit提交)

⑥ hidden 隐藏域(即可提交数据,也不影响界面)

⑦ submit 提交按钮

⑧ reset 重置按钮

⑨ file 文件上传

4.2 举例

<form action="" method="get">
        <!-- size默认20 -->
        用户名: <input type="text" name="username"/> <br/>

        <!-- 注: 此处的空格为全角(中文)的空格 -->
        密　码: <input type="password" name="password"/> <br/>

        <!-- 推荐 name一致的为同一组 -->
        爱　好: <input type="checkbox" name="likes"/>足球
                <input type="checkbox" name="likes"/>篮球
                <input type="checkbox" name="likes"/>羽毛球<br/>

        <!-- name必须一致, -->
        性　别: <input type="radio" name="gender">男
                <input type="radio" name="gender">女<br />
    
        <!-- 文件上传, 需要设置form的entype为不编码-->
        头　像:　<input type="file" name="upload"/> <br/>
        
        <!-- 下拉框 -->
        出生地: <select name="birthAddr">
                    <option value="none">--请选择--</option>        
                    <option value="bj">北京</option>        
                    <option value="wh">武汉</option>
                    <option value="sz">深圳</option>
                </select><br />

        <!-- 文本域 -->
        说　明: <textarea cols="30" rows="5">请输入</textarea><br/>

        <!-- 提交-普通按钮 -->
        <input type="submit" value="提交"/>

        <!-- 提交-图片 -->
        <input type="image" src="http://up.ekoooo.com/uploads2/allimg/110812/9_110812055027_1.png" />

        <!-- 重置-->
        <input type="reset" value="重置"/>
        
    </form>

5. <select> 下拉框

参看 w3cSchool

6. <textarea> 文本域

参看 w3cSchool