码迷,mamicode.com
首页 > Web开发 > 详细

HTML的form表单

时间:2019-07-30 23:21:33      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:username   多文件   uname   checked   html5   name   code   city   hid   

.表单form

单是一个包含表单元素的区域。

表单能够包含 input 元素,textareaselectfieldsetlegend label 元素。

表单使用标签(<form>)定义。

表单用于向服务器传输数据。

<form name="form1" action="URL" method="get">

用户名:<input type="text" name="uname" />

码:<input type="password" name="passwd" />

</form>

属性 说明

name 表单的名称

action 表单提交地址

method 表单数据提交的方式 get ,post

enctype MIME类型

target 打开方式

 

<input>(表单元素:输入框)

属性 说明

type input元素类型

name input 元素的名称

value input 元素的值

size input 元素的宽度

readonly 是否只读

maxlength 输入字符的最大长度

disabled 是否禁用

文本框:<input type="text" name="username" value="" />

密码框:<input type="password"name="passwd"/>

单选框:<input type="radio"name=" "value=" "checked />

复选框:<input type="checkbox"name="" value=" "/>

隐藏域;<input type="hidden" name="" value=""/>

 

按钮:

<input type="button" name="btn" value="确定"/>

<input type="submit" name="comit" value="提交"/>

<input type="reset" name="reset" value="重写"/>

<input type="image"name="img_btn" src="btn.gif"/>

上传文件:<input type=”file” name=””/>

注意

利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data

 

说明:

 multiple     控制是否上传多文件

 

textarea(表单元素:多行文本域)

<textarea name="content" rows="5" cols="50"> </textarea>

属性 说明

name 元素的名称

rows 指定文本框的高度

cols 指定文本框的宽度

 

select(表单元素:下拉框)

<select name="city">

<option value="0">请选择</option

<option value=“bj” selected >北京</option>

<option value="gz">广州</option>

</select>

属性 说明

name 下拉列表框的名称

size 下拉列表框的显示行数

multiple 是否多选

disabled 是否禁用

selected 设置默认选中的选项

value 选项的值

optgroup(表单元素:下拉框分组)

optgroup 元素用于组合选项

<select name="city" multiple>

<optgroup label="广东">

<option value="1">广州</option>

</optgroup>

 </select>

属性 说明

label 指定组合选项名称

Label : lable 标签的作用是将输入项或选项及其标签文字关联起来。

例:

<input type="radio" name="sex" value="1" id="male" />

<label for="male"></label>

 

HTML5的表单所有Input类型 type

技术图片

 

HTML的form表单

标签:username   多文件   uname   checked   html5   name   code   city   hid   

原文地址:https://www.cnblogs.com/yinfa/p/11273405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!