03-HTML-form-input

快来打我* 2022-09-18 01:56 150阅读 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 条评论，150人围观）

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

相关阅读

相关 03/02~03/08周报

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

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

相关 03 ReentrantLock

1. 什么是重入锁？有哪些可重入锁？重入锁指的是可重复可递归调用的锁，在外层使用锁之后，在内层可以再次获取同一个锁，并且不发生死锁，这样的锁就叫做可重入锁。

谁借莪１个温暖的怀抱￠/ 2022年11月25日 11:53/ 0 赞/ 128 阅读

相关 2021-03-03

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

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

相关 css-03

1、文本格式化 1）控制字体 1⃣️指定字体 font-family:"microsoft yahei",arial,"宋体";

爱被打了一巴掌/ 2022年07月15日 01:13/ 0 赞/ 94 阅读

相关 test_03

1.字符串最后一个单词的长度题目描述：计算字符串最后一个单词的长度，单词以空格隔开。输入描述: 一行字符串，非空，长度小于

古城微笑少年丶/ 2022年06月02日 04:44/ 0 赞/ 138 阅读

相关 03-JavaScript

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

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

相关 03-对话框

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

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

相关 day03

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

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

相关前端03

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

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

相关 MySQL03

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

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