错误博客( cuowu.com )发布于 2019-06-04 22:50:21

HTML表单

<form></form>,表单标签,form标签教程。

表单标签

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

用法:

<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 在一个全新的窗口中打开链接

表单对象

表单元素如下:

  • 文字字段 <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″/>

菜单和列表

下拉菜单

下拉菜单是一种最节省页面的选择方式,通过<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>

 

文本域

用法:

<textarea name=”文本域名称” cols=”列数” rows=”行数”></textarea>,输入多行文本,应该选择文本域而不是文字字段

例如:

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

id标记

用法:

<id=”元素的标识名”>,Id标记用于标示一个惟一的元素。Id和name都可以用来标识一个标记。

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


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码