首页 > Web开发 > 详细

03-HTML表单

时间:2020-01-18 10:39:11      阅读:59      评论:0      收藏:0      [点我收藏+]

1、input表单输入元素,type属性,<input type="">

text:文字域
password:密码域 file:文件域 checkbox:复选域 radio:单选域 button:按钮 submit:提交按钮 reset:重置按钮 hidden:隐藏域 image:图像域

 

2、单选按钮(radio)

<form>
nan<input type="radio" name="sex" value="man">  //value不显示,但会发送到服务器
nv<input type="radio" name="sex" value="woman">  //单选按钮name值必须一样
bm<input type="radio" name="sex" value="bm" checked>  //checked开始值被选中
</form>

 

form标签中,实现表单元素的添加

input:表单输入标签

select:下拉菜单和列表标签

option:下拉菜单和列表项目分组标签

optgroup:下拉菜单和列表项目分成标签

textarea:文字域标签

 

3、复选框

<form>
dushu<input type="checkbox" name="1″ value="dushu">  //value不显示,但会发送到服务器
changge<input type="checkbox" name="2″ value="changge">   //name值可以一样,也可以不一样
tiaowu<input type="checkbox" name="3″ value="tiaowu"checked>  //checked开始值被选中
</form>

 

4、图像域

<form>
<input type="image" name="4″ src="#">  //src是图像域必不可少的。图像域相当于提交按钮使用
</form>

 

5、隐藏域,target是链接打开的方式,_blank是从新的页面打开链接

<form target="_blank">
<input type="hidden" name="">  //隐藏提交的内容
</form>

 

6、option下拉菜单,一次只能选择一个

<select name="">
<option value="" selected>–请选择–</option>  //selected默认选项状态
<option value="">选项二</option>
<option value="">选项三</option>
</select>

 

select标签属性

name:设置下拉菜单和列表的名称

multiple:设置可选择多个选项

size:设置列表中可见选项的数目

 

7、一次显示3个,按ctrl可多选

<select name="" size="3″ multiple>
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
</select>

 

8、下拉菜单分组

<select><optgroup label="组1″>   //optgroup对选项进行分组,label是组名
<option value="" selected>选项一</option>  //selected默认选项状态
<option value="">选项二</option>
<option value="">选项三</option>
</optgroup>

<optgroup label="组2″> <option value="">选项一</option> <option value="">选项二</option> <option value="">选项三</option> </optgroup> </select>

 

9、textarea文字域

<textarea name="" rows="5″ cols="50″ placeholder="请输入。。">  //rows是文本域的行数,cols是文本域的宽度
</textarea>  //placeholder是文本域的提示信息

 

10、span标签:没有实际意义,只是为了应用样式

<span>  span标签是是行内标签,里面添加的内容都在一行显示  </span>

 

11、div块级标签:可以包含行内标签,但行内标签不可以包含块级标签。

<div>  div标签是块级标签,一个div占一行  </div>

03-HTML表单

原文:https://www.cnblogs.com/mingliangge/p/12207594.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!