HTML入内基础3:表单

1  表单的应用

网站的用户名注册和登录。主要用来接收用户提交的信息,并把信息提交给服务器,实现客户端和服务器的交互。

2  表单基本语法

使用form标签。表单的所有元素,包括文本域、单选框、复选框、按钮、列表等等,都要包含在form标签内。具体的表单元素如下:


2.1  input标签

单标签,语法:<input type="类型属性" name="名称" ... />
其中,type的属性值有很多种,每种对应一种表单元素。


input的单行文本域
基本语法:<input type="text" name="..." ... />
其他可选属性:

input的密码框
基本语法:<input type="password" name="..." ... />
密码域也是单行文本域的形式,只不过输入其中的信息以圆点的形式显示。

input的文件域
基本语法:<input type="file" name="..." ... />
功能是让用户可以上传本地电脑的文件。不同的浏览器的显示效果不同。

input的单选框
基本语法:<input type="radio" name="..." value="..." checked />
例如,选择性别的单选框:

<form>
        男<input type="radio" name="sex" value="man">
        女<input type="radio" name="sex" value="woman">
</form>

注意:(1)男、女是要写到input标签外面的,input标签的表现形式就仅仅是那个圆点。(2)value值的作用是提交到服务器的值。(3)同一组的name属性值一定要一样,这样才能保证是单选,否则就可以多选了。(4)checked属性的作用是默认选中,哪个input标签设置了checked,哪个单选框就是默认被选中的状态。

input的复选框
基本语法:<input type="checkbox" name="..." value="..." checked />
例如一个关于爱好的复选框:

<form>
        读书<input type="checkbox" name="hobby" value="read" checked>
        唱歌<input type="checkbox" name="hobby" value="sing">
        跳舞<input type="checkbox" name="hobby" value="dance">
</form>

注意:(1)具体的爱好是要写到input标签外面的,input标签的表现形式就仅仅是那个方点。(2)value值的作用是提交到服务器的值。(3)同一组的name属性值没有要求一定要一样,但是规范起见,最好保持一致。(4)checked属性的作用是默认选中,哪个input标签设置了checked,哪个单选框就是默认被选中的状态。

input的按钮

<form><!--value的值是显示在按钮上的文字内容-->
        <input type="button" name="..." value="点我"/><!--普通按钮-->
        <input type="submit" name="..." value="提交"/><!--提交按钮-->
        <input type="reset" name="..." value="重置"/><!--重置按钮-->
        <input type="image" name="..." src="..." /><!--图像按钮-->
</form>

图像按钮是为了让按钮看起来更美观,而插入的一张图片形式的按钮。功能和提交按钮相同。

input隐藏域
假如我们需要提交一些信息给服务器,但是还想隐藏它们,可以使用隐藏域。当用户点击提交按钮后,信息就会提交到服务器。<input type="hidden" name="..." value="想要提交到服务器的信息"/>

2.2  下拉菜单和列表标签select和option

基本语法:

<select><!--下拉菜单-->
            <option value="...">选项</option><!--菜单里的每一项-->
            <option value="...">选项</option>
            ...
</select>

这里的value属性值的作用和上面的都一样,是提交到服务器中的值。
select标签的可选属性:



如果设置了size属性,则显示方式由只显示一项的下拉菜单变为显示多项的列表形式。
option标签可选属性:



例子:
<form><!--下拉菜单5个选项,列表项5个选项,可以多选,可见选项数为3。-->
     下拉菜单:<br/>
     <select>
         <option value="panda">熊猫</option>
         <option value="cat">猫</option>
         <option value="dog">狗</option>
         <option value="pig">猪</option>
         <option value="monkey">猴子</option>
     </select>
     <br/><br/>
     列表:<br/>
     <select size="3" multiple>
         <option value="apple">苹果</option>
         <option value="banana">香蕉</option>
         <option value="orange">橙子</option>
         <option value="peach">桃</option>
         <option value="pear">梨</option>
     </select>
 </form>

分组下拉菜单和列表标签optgroup
可以对菜单里的各个项进行分组划分。
例子:

<form>
        <select>
            <option selected>请选择:</option>
            <optgroup label="水果">
                <option value="apple">苹果</option>
                <option value="kivi">猕猴桃</option>
                <option value="apricots">杏子</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option value="tomato">西红柿</option>
                <option value="cabbage">白菜</option>
                <option value="lettuce">油麦菜</option>
            </optgroup>
        </select>
</form>

2.3  多行文本域textarea

基本语法:

<textarea name="..." rows="..." cols="..." ...>
内容
</textarea>

textarea标签的可选属性:


3  表单form标签属性

表单的作用是把用户输入的信息提交到服务器上,那么如何提交?提交到服务器上哪里?如何处理数据?这些是需要在form标签的属性中进行设置的。
基本语法:

<form action="..." method="..." name=''..." ...>
表单元素
</form>

action属性定义的是把表单内容提交到服务器上的一个处理程序的URL地址,即“给谁”。
method属性定义提交的方式,即“怎么给”。如果利用get方式提交,使用URL传递参数,用户的提交信息会被放到action指定的URL地址后面,会暴露在浏览器的地址栏中。发送的信息有数量的限制,一般用于信息的获取。而使用post方式,表单数据会作为HTTP请求体的一部分,不会暴露出来;对发送信息的数量无限制,一般用于提交和修改服务器上的数据。

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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,232评论 1 41
  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 663评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0 0
  • 表单表单是用来提交资料、意见,规范流程执行过程的格式。在网页中主要负责数据采集功能。表单标签:这里面包含了处理表单...
    思思有礼阅读 780评论 0 0
  • 主要Java方法 Android事件分发主要经过3个方法,分别处理事件的分发、拦截、消耗 public bool...
    简约黑阅读 178评论 0 0