HTML5表单设置

最新推荐文章于 2023-07-24 21:58:54 发布

manREDoo

最新推荐文章于 2023-07-24 21:58:54 发布

阅读量1k

点赞数 1

文章标签： HTML5 表单输入组件选择组件列表和按钮组件

本文链接：https://blog.csdn.net/manREDoo/article/details/73864208

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单：

<form>...</form>：是一个容器，其中会放置各种表单组件。

里面有:

method属性：设置值可以是post和get,get方式发送数据时会直接加在URL之后，post方式是将数据封装之后再发送，字符串长度没有限制，数据安全性比较高。

action属性：表单通常会与asp或php等数据库程序配合使用，用来指出发送的目的地。

Enctype属性：entype=”multipart/form-data”:用于上传文件的时候。Entype=”text/plain”:将表单属性发送到电子信箱。

Target属性：指定提交到哪一个窗口，

_blank 打开新窗口

_self 当前的窗口

_parent 上一层的窗口

_top 最上层的窗口

Autocomplete属性：用来设置input组件是否使用自动完成功能有on和off两种

Novalidate:用来设置是否要在发送表单时候验证表单

输入组件：

文本框text:

type=”text” :输入方式为文本框

name=”username” 文本框的名称

value=”guest” 默认值

size=”10” 文本框长度

maxlength=”10 限制文本框的字数

Autofocus: 指加载网页之后，自动将光标移动到此文本框

多行文本框textarea:

name=”name” 文本框的名字

cols=”20” 文本框的宽度

rows=”4” 文本框的行数

wrap=”virtual” 是否换行，hard是换行，soft是不换行

密码域password:

日期域date:

数字域number:

颜色color:

范围域range:

查找域search:

列表组件：

select组件：

</select>

Size表示显示多少行。Multiple选项可以多选。

Datalist组件：

<datalist id="1"> 必要的指定id

</datalist>提示用户输入

选择组件：

单选按钮radio:

<input type="radio" name="1" value="女" checked>女

<input type="radio" name="1" value="男" >男

Name=”” 组件的名称，name属性值相同的radio组件会被视为同一组的组件。

Value=”” radio组件的值，当表单被提交时，已选择的radio组件的value值就会被发送。

Checked:表示已经选择这一项

复选框checkbox:

Name=”” 组件的名称，name属性值相同的radio组件会被视为同一组的组件。

Value=”” radio组件的值，当表单被提交时，已选择的radio组件的value值就会被发送。

Checked:表示已经选择这一项

按钮组键：

Submit按钮：

name：按钮的名字

value：按钮显示的字

Rest \ button也是一样使用。

表单分组：

分组内容

</fieldset>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>表单范例</title>
</head>
<body>
	<h3>教学意见调查表</h3>
	<form action="" method="post" accept-charset="utf-8">
		<fieldset>
			<legend>个人及课程资料</legend>
			<ol>
				<li>
					科目名称： <input type="text" name="" value="" placeholder="">
				</li>
				<li>
					请选择系所： 
					<select size="1">
						<option value="">1111</option>}
						<option value="">1</option>
						<option value="">2</option>
						<option value="">3</option>
					</select>
				</li>
				<li>
					讲师： <input type="text" name="" value="" placeholder="">
				</li>
				<li>
					性别： <input type="radio" name="1" value="" placeholder="">男
							<input type="radio" name="1" value="" placeholder="">女
				</li>
				<li>
					开课日期： <input type="date" name="" value="" placeholder="">
				</li>
			</ol>
		</fieldset>
		<input type="submit" name="" value="提交">
		<input type="reset" name="" value="取消">
	</form>
</body>
</html>

manREDoo

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5表单设置

表单：...：是一个容器，其中会放置各种表单组件。里面有:method属性：设置值可以是post和get,get方式发送数据时会直接加在URL之后，post方式是将数据封装之后再发送，字符串长度没有限制，数据安全性比较高。 action属性：表单通常会与asp或php等数据库程序配合使用，用来指出发送的目的地。 Enctype属性：entype=”multipart/f
复制链接

扫一扫