2020-03-08

列表标签:展示列表项

    有序列表:  ol  li

    无序列表: ul  li


表单标签:用于采集用户数据,和服务器进行交互。

    <form>:用于定义表单。可以定义一个范围来采集用户输入的数据。


    常用属性:

            action:指定提交数据的url

            method:指定表单数据的提交方式(共有7中,常用的有两种)

get:

1.请求参数会在地址栏中显示。数据会封装到请求行中。

2.请求参数大小有限制。

3.不安全

post:

1.请求参数不会再地址栏中显示。会封装到请求体中。

2.请求参数大小没有限制。

3.安全

注意:表单项中的数据要想被提交,必须定义其name属性!

常用的表单项:

A.<input>

常用属性:type


text:文本输入框(默认文本输入框)

password:密码输入框

radio:单选框

注意:

1.要想实现单选效果,单选框的name值必须一样。

2.一般会给每个单选框提供一个value属性。

3.使用checked属性指定默认值。

checkbox:复选框   

注意:

1.一般会给每个复选框提供value属性。

2.checked属性,可以指定默认值

按钮:

submit:提交按钮用于提交表单。

button:普通按钮。

image:图片提交按钮。src:指定图片的路径

B.<select>:下拉列表

注意:要和<option>标签配合使用

  select标签要设置name属性

  option标签要设置value属性


C.<textarea>

属性:

cols:指定列数(每一行有多少个字符)

rows:指定行数


1、Get提交的参数列表拼接到地址栏后面,post不会拼接到地址栏

2、get范式提交的数据,敏感信息不全全,post但是提交的数据相对安全

3、get方式提交的数据是有限的,post方式从理论上提交的数据是无限大的

尽量使用post方式提交表单

输入项标签

<input/>标签

表单输入项标签之一,用户可以在该标签上,通过填写和选择,进行数据输入

type : 设置该标签的种类

text:文本框,默认

password:密码框,内容非明文

radio:单选框,在同一组内又单选的效果

chechbox:复选框,在同一组内有复选鲜果

submit:提交按钮,用于控制表单提交数据

reset:重复按钮,用于控制表单提交数据

file:附件框,用于文件上传

hidder:隐藏域,一般用作提交服务器需要拿到,单用户不需要看到的数据

button:普通按钮,需要和js事件一起用

name:单选框,复选框进行数据的分组,设置该标签对应的参数名,要提交数据给后台,西辟邪name

value :设置该标签对应的参数值/作为按钮的名字

checked:设置单选框/复选框的默认选中状态

readonly:设置该标签的参数值只读,用户无法手动更改,数据是可以正常提交的

disabled:设置该标签不可用,参数值无法更改,并且无法提交

--------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>作业</title>

<meta charset="utf-8" />

</head>

<body>

<form action="下午3.html" method="post">

<left>用户ID:<input type="hidden" name="uid" value="123">

<br>

<br>

头像:<input type="file" name="photo">

<br>

<br>

用户名:<input type="text" name="username" readonly="readonly" value="睡姿决定发型">

<br>

<br>

密码:<input type="password" name="userpass" disabled="disabled" value="123123">

<br>

<br>

手机号:<input type="text" name="phone" placeholder="手机号">

<br>

<br>

邮箱:<input type="text" name="qq" placeholder="邮箱">

<select name=".com"><option value="fsy"   selected="selected">@282.com</option>

<option value="qxx">@123.com</option>

<option value="qzl">@321.com</option></select>

<br>

<br>

性别:<input type="radio" name="gender" value="male" checked="checked">男<input

type="radio" name="gender" value="female">女<br>

<br>

年龄:<select name="old"><option value="少年"

  selected="selected">1~18</option>

<option value="青年">19~30</option>

<option value="中年">31~50</option></select>

<br>

<br>

爱好:<input type="checkbox" name="hobby" value="chiji" checked="checked">游戏<input

type="checkbox" name="hobby" value="meinv" checked="checked">美女<input

type="checkbox" name="hobby" value="dianying">旅游<input

type="checkbox" name="hobby" value="eat">吃<br>

<br>

你喜欢的明星:<select name="star"><option value="fsy">周深</option>

<option value="qxx" selected="selected">胡歌</option>

<option value="qzl">司南</option></select>

<br>

<br>

所在省份:<select name="from"><option value="sheng"

selected="selected">河南省</option>

<option value="sheng">北京</option>

<option value="sheng">湖北</option>

<option value="sheng">山东</option>

<option value="sheng">浙江</option>

<option value="sheng">福建</option>

<option value="sheng">广西</option></select>

<br>

<br>

自我介绍:<textarea name="info"></textarea>

<br>

<br>

<input type="submit" value="确定">

<input type="reset" name="">

<input type="button" value="按钮">

<br>

<br>

<!---->

<button type="submit">确定</button>

<button type="reset">重置</button>

<button type="button">按钮</button>

</left>

</form>

</body>

</html>


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

推荐阅读更多精彩内容

  • 第2天上课内容 我们今天学习了超链接标签,列表,表格,内联...
    哈哈哈额哈哈哈阅读 291评论 0 0
  • 作业 day 02 </ a>超链接标签 1.用于定义一个可以点击跳转的连接 2 herf:...
    常樂_b00d阅读 199评论 0 0
  • 一、列表 1.无序列表ul li 2.有序列表ol li 3.定义列表dl dt dl.ul.ol<之间可以互相嵌...
    刘哲_1d91阅读 194评论 0 0
  • 表单一、 表单的基本应用(一) 表单典型的应用场景 登录、注册 网上订单 调查问卷 网上搜索(二) 表单标签及表...
    拾起_518阅读 539评论 0 0
  • 表单 一、 表单的基本应用 (一) 表单典型的应用场景 1. 登录、注册 2. 网上订单 3. 调查问卷 4. 网...
    拾起_518阅读 259评论 0 0