Form表单input标签

form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

  • 作用:form表单提交的方式向服务器发送数据
  • 常见的input标签
  • text
<label for="input_username">用户名:</label> <input id="input_username" name="username" type="text" placeholder="输入用户名" autofocus/>
<!-- 
text 用于输入一行文字 比如说输入姓名 
placeholder是没有输入是显示的提示文字,不是真实的赋值,一旦有输入值或者输入时placeholder隐藏显示
autofocus 用来指定聚焦元素
 -->
  • password
            <label for="input_pass">密码:</label> <input id="input_pass" name="password" type="password" placeholder="输入密码"/>
<!-- 
password 用于输入密码
pass world元素输入值会显示成黑点
for 可以把描述元素与输入元素通过id绑定到一起,点击描述时聚焦到相对应的输入框
 -->
  • radio 单选框
          <label for="ck1">ra1:</label><input type="radio" id="ra1" name="ra" value="1" />
            <br/>
            <label for="ra2">ra2:</label><input type="radio" id="ra2" name="ra" value="2" />
            <br/>
            <label for="ra3">ra3:</label><input type="radio" id="ra3" name="ra" value="3" />
<!-- 
radio 是单选框 每组只能选择一个 那么表示分组 value表示单选框的值
 -->
  • checkbox 复选框
            <h3>复选框</h3>
            <label for="ck1">CK1:</label><input type="checkbox" id="ck1" name="ck" value="1" />
            <br/>
            <label for="ck2">CK2:</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
            <br/>
            <label for="ck3">CK3:</label><input type="checkbox" id="ck3" name="ck" value="3" />
            <br/>
<!-- 
checkbox 是复选框 每组可以选择多个 name用于分组 value 选定按钮的值  checked 代表处于默认选中状态
 -->
  • file
            <h3>File</h3>
            <input type="file" accept="image/gif, image/jpeg"/>
            <br/><br/>
            <!-- 
                file用于选择文件 accept参数可以制定文件类型
             -->
  • image 按钮
            <h3>image 按钮</h3>
            <input type="image" src="xxx.jpg" alt="Submit Form"/>
            <br/><br/>
            <!--
              图片按钮和submit提交按钮一样,点击可以提交表单,当然也可以作为普通按钮使用。 
            -->
  • 隐藏域
    <h3>隐藏域</h3>
  • radio 单选框
    <label for="ck1">ra1:</label><input type="radio" id="ra1" name="ra" value="1" /> <br/> <label for="ra2">ra2:</label><input type="radio" id="ra2" name="ra" value="2" /> <br/> <label for="ra3">ra3:</label><input type="radio" id="ra3" name="ra" value="3" />
    >>- checkbox 复选框
    <h3>复选框</h3> <label for="ck1">CK1:</label><input type="checkbox" id="ck1" name="ck" value="1" /> <br/> <label for="ck2">CK2:</label><input type="checkbox" id="ck2" name="ck" value="2" checked /> <br/> <label for="ck3">CK3:</label><input type="checkbox" id="ck3" name="ck" value="3" /> <br/>
    >>- file
    <h3>File</h3> <input type="file" accept="image/gif, image/jpeg"/> <br/><br/>
    >> - image 按钮
    <h3>image 按钮</h3> <input type="image" src="xxx.jpg" alt="Submit Form"/> <br/><br/>
    >> - 隐藏域
    <h3>隐藏域</h3>
    <input type="hidden" value="xxx" />



  • select 下拉菜单
            <h3>下拉菜单</h3>
            <select id="input_select">
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <!-- 
              下拉菜单点击会显示下拉框
              select代表默认选中值
              下拉菜单直接是类型select与元素option  不再是input标签用type指定出现
             -->
  • textarea 多行输入框 用于输入大量文字
            <h3>多行文本</h3>
            <textarea cols="60" rows="5">123</textarea>
            <br/><br/>
  • button submit reset
            <input type="button" value="Buttom" />     <!-- 点击不会提交也不会刷新 -->
            <input type="submit" value="Submit" />      <!-- 点击会提交数据 -->
            <input type="reset" value="Reset" />  <!-- 点击会重置所有input标签 -->

form标签属性

form标签是表单的外壳,主要有四个属性
action: 表单提交的地址
method:提交保单的方法
target:在何处打开action
enctype:
application/x-www-form-urlencoded:在发送前编码所有字符(默认)
text/plain:空格转换为 "+" 加号,但不对特殊字符编码
multipart/form-data:使用包含文件上传控件的表单时,必须使用该值

post 和 get 方式的区别?

get

表单数据会被encodeURIComponent后以参数形式name1=value1&name2=value2 附带在 url?后面发送给服务器,并在url中显示出来;

post

<!--
 content-type 默认"application/x-www-form-urlencoded" 对表单数据进行编码,
数据字段以键值对在 http请求体中发送给服务器;
如果 enctype 属性值为"multipart/form-data",
则以消息的形式发送给服务器。
-->

post和get都可以用于上传数据
post相对于get要安全一些

<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

>> - textarea 多行输入框 用于输入大量文字
<h3>多行文本</h3>
<textarea cols="60" rows="5">123</textarea>



>> - button submit reset
<input type="button" value="Buttom" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
####form标签属性 > form标签是表单的外壳,主要有四个属性 action: 表单提交的地址 method:提交保单的方法 target:在何处打开action enctype: application/x-www-form-urlencoded:在发送前编码所有字符(默认) text/plain:空格转换为 "+" 加号,但不对特殊字符编码 multipart/form-data:使用包含文件上传控件的表单时,必须使用该值 ####post 和 get 方式的区别? >get
表单数据会被encodeURIComponent后以参数形式name1=value1&name2=value2 附带在 url?后面发送给服务器,并在url中显示出来;
> --- >post

```
>---
>
>>post和get都可以用于上传数据
post相对于get要安全一些
post可以传输的最大数据量要大一些,数据量比较大时post无法保证数据的完整性
post一般用于上传数据
get一般用于请求数据时上传一些与安全无关的参数

input中name的作用

name可以用于单选框与复选框的分组 也是传递变量时的变量名 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

radio 如何 分组?

相同name的radio元素再同一组

placeholder 属性有什么作用?

提示用户进行输入
placeholder是没有输入是显示的提示文字,不是真实的赋值,一旦有输入值或者输入时placeholder隐藏显示

type=hidden隐藏域有什么作用?

传递一个校验值,以便于后端做安全验证

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 3,962评论 0 3
  • 关键字:form表单作用;常用input标签;post 和 get 区别;radio分组;placeholder作...
    好奇而已阅读 1,408评论 0 0
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,364评论 2 14
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,064评论 0 0
  • 一起骑车外环,和阿猫重温旧时光,感慨过的好快,但幸福如此,开心满怀! 晚上和超哥一起聚餐,团团圆圆,相互聊一下,也...
    聂一一阅读 48评论 0 0