Html-html表单标签

最新推荐文章于 2024-03-20 23:20:03 发布

guardwhy

最新推荐文章于 2024-03-20 23:20:03 发布

阅读量300

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/hxy1625309592/article/details/109587630

版权

5.1 表单基本框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本框架</title>
</head>
<body>
  <form action="" method="" name="">
    表单元素..
  </form>
</body>
</html>

5.2 form标签属性

属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get、post	设置表单以何种方式发送到指定页面
name form_name 表单的名称	form_name	表单的名称
target	_blank、_self _parent、_top	在何处打开 action URL

5.3 post和get区别

GET方法

使用URL传递参数 对所发送信息的数量也有限制 一般用于信息获取。

POST方法

表单数据作为HTTP请求体的一部分对所发送信息的数量无限制 一般用于修改服务器上的资源。

6- 表单元素标签

6.1 输入标签

表单输入标签

<input type=“类型属性” name=“名称 ” …… />

6.1.1 type属性值

Type属性值	描述
text	文字域
password	密码域
file	文件域
checkbox	复选域
radio	单选域
Button	按钮
Submit	提交按钮
Reset	重置按钮
Hidden	隐藏域
image	图像域

6.1.2 单行文本域(text)

<form>
    <input type="text" name="".... />
</form>

单行文本域属性

属性	描述
Name	文字域的名称
Maxlength	指用户输入的最大字符长度。
Size	指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符。
value	指定文本框的默认值
placeholder	规定用户填写输入字段的提示

6.1.3 密码框

<form>
	<input type=" password " name=““ ….. />
</form>

6.1.4 文件域属性

<form>
	<input type=" file " name=“…“ />
</form>

6.1.5 单选框属性

<form>
	<input type=“radio” name=“…“ value=“…” checked />
</form>

6.1.6 复选框标签

<form>
	<input type=“checkbox” name=“…“value=“…” checked />
</form>

6.1.7 按钮标签

<input type=“button” name="..." value=“…” />
	<!-- 提交按钮 -->
<input type=“submit” name="..." value=“…” />
	<!--重置按钮-->
<input type=“reset” name="..." value=“…” />

6.1.8 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-表单标签</title>
</head>
<body>
  <form>
      <!--明文输入框-->
      姓名：<input type="text" name="username"/><br/>
      密码：<input type="password" name="pwd"/><br/>

      <!--单选框-->
      性别:
      <input type="radio" name="xx" checked>男
      <input type="radio" name="xx">女
      <input type="radio" name="xx">保密<br/>

      <!--多选框-->
      爱好:
      <input type="checkbox">篮球
      <input type="checkbox">足球
      <input type="checkbox" checked="checked">游泳
      <input type="checkbox" checked="checked">跑步<br/>

      <!--提交按钮-->
      <input type="submit" value="提交按钮"/>
  </form>
</body>
</html>

执行结果

6.1.9 图像提交按钮

<input type=“image” name=“…“ src=“imageurl” />

6.1.10 隐藏域

<input type=“hidden” name=“…“ value=“…” />

6.1.11 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-表单标签</title>
</head>
  <body>
    <form action="http://www.baidu.com">
      <!--明文输入框-->
      姓名：<input type="text" name=

最低0.47元/天解锁文章

guardwhy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html-html表单标签

5.1 表单基本框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本框架</title></head><body> <form action="" method="" name=""> 表单元素.. </form></body></html&g
复制链接

扫一扫

专栏目录