HTML5笔记009 - 第09章 表单

第09章 表单

9.1 表单简介

在HTML中表单标签有五种：form、input、textarea、select、option
从外观上来划分，表单分为八种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表

9.2 form标签

# form标签简介
所有表单标签都需放在form标签内
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>all tag</title>
	</head>
	<body>
		<form>
			<input type="text" value="这是一个单行文本框" />单行文本框<br/>
			<input type="radio" />单选框<br/>
			<input type="checkbox" />复选框<br/>
			<input type="password" />密码框<br/>
			<input type="file"/><br/>
			<input type="button" value="普通按钮"/><br/>
			<input type="submit"/>提交按钮<br/>
			<input type="reset" />重置按钮<br/>
			<textarea>这是一个多行文本框</textarea>多行文本框<br/>
			<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
			</select>下拉列表
		</form>
	</body>
</html>

# form标签属性
name 表单名称：一个页面中表单不止一个，每个form标签就是一个表单，使用name来区分；
method 提交方式：在form标签中，method属性用于指定表单数据使用哪一种http提交方法；
action 提交地址：用于指定表单数据提交到哪个地址进行处理；
target 打开方式：用来指定窗口的打开方式；
enctype 编码方式：用于指定表单数据提交的编码方式；

9.3 input标签

在HTML中，大多数表单都是使用input标签来实现的；input标签是自闭合标签，没有结束符号；
<input type="表单类型" />
表单类型：
text 单行文本框
password 密码文本框
radio 单选框
checkbox 复选框
button或submit或reset 按钮
file 文件上传

9.4 单行文本框

# 单行文本框
使用input标签来实现，type属性值设为text
<form>
	姓名：<input type="text" value="这是一个单行文本框" /><br/>
</form>
# 单行文本框属性
value 设置文本框显示的默认值，默认文字
size 设置文本框长度
maxlength 设置文本框中最多可输入字符数

9.5 密码文本框

# 密码文本框
使用input标签来实现，type属性值设为password
密码文本框中输入的字符不可见
<form>
    姓名：<input type="text" value="请输入姓名" /><br/>
    密码：<input type="password" value="默认密码为123456" /><br/>
</form>
# 密码文本框的属性同单行文本框

9.6 单选框

# 单选框
使用input标签来实现，type属性值设为radio
<form>
    性别：
    <input type="radio" name="gender" value="男" />男
    <input type="radio" name="gender" value="女" />女
</form>

# checked属性
可默认选中一个单选框，name属性值相同是一个组，选项是互斥的；
<form>
    性别：
    <input type="radio" name="gender" value="男" checked="checked"/>男
    <input type="radio" name="gender" value="女" />女
</form>

9.7 复选框

# 复选框
<form>
    你喜欢哪一种水果：
    <input type="checkbox" name="fruit" value="苹果" checked="checked"/>苹果
    <input type="checkbox" name="fruit" value="香蕉" />香蕉
</form>

9.8 按钮

# 按钮
普通按钮button
提交按钮submit
重置按钮reset

# 普通按钮button
<form>
    普通按钮：<input type="button" value="普通按钮" onclick="alert()"/>
</form>

# 提交按钮submit
<form>
    提交按钮：<input type="submit" value="提交按钮" />
</form>

# 重置按钮reset
<form>
    重置按钮：<input type="reset" value="重置按钮" />
</form>

9.9 文件上传

# 文件上传
<form>
    文件上传：
    <input type="file" />
</form>

9.10 多行文本框

# 多行文本框
<form>
    多行文本框：<br />
    <textarea rows="5" cols="20">多行文本框</textarea>
</form>

9.11 下拉列表

# 下拉列表
<form>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>
# select标签属性
multiple:设置下拉列表可以选择多项
size：设置下拉列表显示几个列表项，取值为整数
# option标签属性
selected 是否选中
value 选项值
posted @ 2020-08-21 06:01  测试工匠麻辣烫  阅读(150)  评论(0)  编辑  收藏  举报