1.9 HTML表单_HTML视频教程

- 灬无言 - 阅 4,401

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

1.9.1 表单标签

一些注册信息,个人简介,这些都是靠表单来实现的。

语法:<form></form> 

表单标签属性如下:

  • 提交表单<form action=”表单的处理程序”></form>

用于指示表单数据提交到哪个地址进行处理。

  • 表单名称<form name=”表单名称”></form>

用于给表单命名,防止提交到后台后出现混乱(不能包含特殊符号、空格)

  • 传送方法<form method=”传送方法”></form>

用于指示在数据提交到服务器时,使用哪种HTTP提交方式:post get

Post:数据传送到action指定的URL,然后这个新URL被送处理程序。

Get:数据包含在表单主体中,然后被送到处理程序。

  • 编码方式<form enctype=”编码方式”></form>

Application/x-www-form-urlencoded:默认的编码方式

Multipart/form-data:MIME编码,上传文件的表单必须选择该项

  • 目标显示方式<form target=”目标窗口打开方式”></form>

Target目标窗口(前面超链接时已讲)

  • _self 在当前页面中打开链接
  • _blank 在一个全新的窗口中打开链接

1.9.2 表单对象

 表单元素如下:

  • 文字字段 <input type=”text” />

Text属性如下

  • Type用来指定插入哪种表单元素,如type=”text”即文字字段
  • Name名称,避免混淆,英文或数字以及下划线区分大小写。
  • Value文本框默认值
  • Size文本框在页面中显示的长度,以字符为单位
  • Maxlength文本框中多可以输入的字符数

如:<input type=”text” name=”text” value=”北” size=”10” maxlength=”20”>

  • 密码域 <input type=”password”/>

属性和Text属性相同,唯一不同的是密码域是 “*”代表

如:<input type=”text” name=”text” value=”111” size=”10” maxlength=”20”>

  • 单选按钮 <input type=”radio” />

属性:type name value,以及checked

几个单选项的name属性值需要用同一个名称,一个单项按钮组,只有一个单选按钮可以设置为checked。

如:

性别:<input type=”radio” name=”性别” value=”男” checked=”checked” />男

<input type=”radio” name=”性别” value=”女” />女

  • 复选框 <input type=”checkbox” />

属性和radio相同。不同点,一组复选框可以有多个checked。

例:

兴趣:<input type=”checkbox” name=”兴趣” value=”跑步” checked />跑步

<input type=”checkbox” name=”兴趣” value=”篮球” checked />篮球

<input type=”checkbox” name=”兴趣” value=”足球”  />足球

<input type=”checkbox” name=”兴趣” value=”乒乓球” />乒乓球

  • 普通按钮 <input type=”button” />

属性:type name value,以及添加onclick来实现特殊功能。

value值就是按钮显示在浏览器中的文字。

案例 火狐浏览器不支持。 谷歌支持。

如:<input type=”button” name=”按钮” value=”关闭窗口” onclick=”window.close()” />

  • 提交按钮 <input type=”submit” />

属性:type name value,value值显示在按钮上,单击实现提交表单

例:

<form method=”post” name=”测试表单” action=”http://www.baidu.com” target=”_blank”>

<input type=”submit” name=”表单” value=”提交表单” />

</form>

  • 重置按钮 <input type=”reset” />

属性:type name value,value值显示在按钮上。

例:<input type=”reset” name=”重置按钮” value=”重置” />

  • 图像域 <input type=”image” name=”图像域名称” src=”图像路径”/>

属性:type name src,功能:图像做按钮。(不建议使用)

例:<input type=”image” name=”按钮图像” src=”1.jpg” />

  • 隐藏域 <input type=”hidden” />

属性:type name value。用于传送不可见数据。

例:<input type=”hidden” name=”隐藏内容” value=”10” />

  • 文件域 <input type=”file” /> 浏览器不同,显示效果也不同

属性:name type size maxlength。size指控件长度,maxlength指最长字数。

例:

<input type=”file” size=”10″ name=”文件域” value=”上传文件” maxlength=”16″/>

1.9.3 菜单和列表

下拉菜单

下拉菜单是一种最节省页面的选择方式,通过<select>和<option>实现

<select name=”下拉菜单名称”>

<option value=”选项值” selected/>选项显示的内容

</select>

上面的selected 也可以写为 selected=” selected”

如:城市

<select>

<option value=”北京”/>北京

<option value=”南京”  selected />南京

</select>

列表项

列表项可以显示出几条信息,超过这个信息量,列表右侧会出现滚动条

<select name=”列表项名称” size=”显示的列表项数” multiple>

<option value=”选项值” selected/>选项显示内容

</select>

上面的multiple也可以写作 multiple=”multiple”

如:城市

<select name=”城市” size=”2″ multiple>

<option value=”北京” >北京

<option value=”上海” >上海

<option value=”武汉” selected>武汉

<option value=”广州” >广州

</select>

1.9.4 文本域

语法:<textarea name=”文本域名称” cols=”列数” rows=”行数”></textarea>

输入多行文本,应该选择文本域而不是文字字段

如:留言:<textarea name=”liuyan” cols=”10″ rows=”10″></textarea>

1.9.5 id标记

语法: <id=”元素的标识名”>

Id标记用于标示一个惟一的元素。Id和name都可以用来标识一个标记。

现在一般用id来标识。但在表单这里,推荐使用name。

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

8

本文转载 " https://www.xxkt.org/1193 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

error: Content is protected !!