HTML——form标签常用表单元素

一切根源都要从form标签说起,不得不说form标签的功能很强大,首先先从form标签自身入手,再讨论包含其中的标签

form标签

作用

  • 用于获取网站用户数据,提交给网站管理者一种渠道

基本属性

  • action属性:提交地址,值为URL(传送目标,处理表单信息的服务器端应用程序)
  • method属性:提交方式,值为Post方法可以传递大量信息,值为Get方法(默认方式)将值附加到请求该页URL中,适合传递少量信息
  • enctype属性:提交数据类型
  • name属性:表单名称

代码如下:

<form action="" method="" enctype="" name=""></form>

先作为了解,重点介绍下form标签下表单元素

input标签

最基本代码:

<input type=""> 

根据type属性值演变不同的控件

文本类型:

单行文本框

用户名:	<input type="text" name="文本框名称" value="初始值" size="显示字符个数" maxlength="最多容纳字符数" readonly="readonly"(设为只读) disabled="disabled"(设置不可操作)> 					

密码框:

密码:	<input type="password" value="初始值" size="显示字符个数" maxlength="最多容纳的字符数">

效果图:

选择类型:

单选框:

性别:<input type="radio" name="sex"/>男
     <input type="radio" name="sex"/>女

需要与name属性连用,要不就变成多选的了

效果图

复选框:

爱好:<input type="checkbox"/>篮球
     <input type="checkbox"/>足球
     <input type="checkbox"/>羽毛球

效果图:

按钮类型

<input type="submit">
<input type="button" value="你好">
<input type="reset">

效果图

多行文本框标签

长文本的输入会用到这个标签

<textarea  cols="5" rows="5"></textarea>

效果图:

select标签(下拉列表框)

<select >
	<option value="" disabled>----请选择-----</option>
	<option value="">北京</option>
	<option value="">南京</option>
	<option value="">上海</option>
</select>

效果图:

label标签

在上述的单选中,选中小圆点才可以实现选中,如下图

那么如何点击文字就可以实现呢,有两种方式

一、label 将文字和控件包含在一起

<label >
	<input type="radio" name="sex"/>男
</label>
<label >
	<input type="radio" name="sex"/>女
</label>

二、为控件一个id属性,label的for属性关联这个id

<input type="radio" name="sex2" id="man" /> <label for="man">男</label> 
<input type="radio" name="sex2" id="woman" /> <label for="woman">女</label> 

浏览框(文件上传域)

<input type="file" name="名称" size="显示长度" >

效果图:

最后一定注意,下面这几个标签全部要在form下级写哦

发布了156 篇原创文章 · 获赞 49 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/shang_0122/article/details/103038246