03-HTML-form-input

快来打我* 2022-09-18 01:56 157阅读 0赞

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">
            
            用户名: <input type="text" name="username"/> <br/>
    
            
            密　码: <input type="password" name="password"/> <br/>
    
            
            爱　好: <input type="checkbox" name="likes"/>足球
                    <input type="checkbox" name="likes"/>篮球
                    <input type="checkbox" name="likes"/>羽毛球<br/>
    
            
            性　别: <input type="radio" name="gender">男
                    <input type="radio" name="gender">女<br />
        
            
            头　像:　<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

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关 03_Bootstrap基础组件03

7 表单 7.1 基本实例设置了 `.form-control` 类的表单元素，默认设置宽度属性为 `width: 100%;`。将 `label` 元素和表单元

怼烎@/ 2023年10月16日 11:28/ 0 赞/ 70 阅读

相关 03/16~03/22周报

【本周任务】一、demo 1.圆形旋转边框：（1）transition属性：设置元素的过渡效果分为四个：（a）transition-property

墨蓝/ 2023年07月16日 03:51/ 0 赞/ 19 阅读

相关 03/09~03/15周报

【本周总结】一、学习html5 1.拖放；[link][] 2.地理定位；[link][link 1] 3.视频及音频< video>/< audio>用链接

- 日理万妓/ 2023年07月14日 13:58/ 0 赞/ 1 阅读

相关 03/02~03/08周报

【本周总结】一、制作bilibili仿站总结问题： 1.css设置background-image是注意width和height都要设置； 2.ul的圆点用

拼搏现实的明天。/ 2023年07月10日 14:11/ 0 赞/ 30 阅读

相关 2021-03-03

package com.cyber.jdbc; import java.sql.; import java.util.ArrayList;

曾经终败给现在/ 2022年11月04日 14:23/ 0 赞/ 162 阅读

相关 03-JavaScript

1、介绍 JavaScript JavaScript：一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScri

悠悠/ 2022年05月26日 10:50/ 0 赞/ 210 阅读

相关 03-对话框

对话框一般应用于临时交互的场景。学习QT中的对话框时，应该使用QWidget作为基类，而不是QDialog。因为QDialog在显示的时候只会有一个对话框。一般分为两种：

客官°小女子只卖身不卖艺/ 2022年03月06日 17:36/ 0 赞/ 305 阅读

相关 day03

![1757605-20190801194819881-1027321934.png][] ![1757605-20190801194608384-257171764.png

约定不等于承诺〃/ 2021年11月02日 14:12/ 0 赞/ 443 阅读

相关前端03

文章目录元素的显示方式三种基本布局模式普通流:是按照文档顺序布局，默认是从上到下，从左到右。浮动流:设定元素按照向某一个方向

今天药忘吃喽~/ 2021年09月25日 09:18/ 0 赞/ 450 阅读

相关 MySQL03

文章目录存储引擎索引什么是索引：为了加快数据库查询速度而创建的一种存储结构，需要存储空间创建索引删除索引:d

﹏ヽ暗。殇╰゛Y/ 2021年09月25日 08:48/ 0 赞/ 326 阅读