HTML基础知识day4

今天我们学习了html中表单的相关知识,表单在网页中的主要功能是数据采集,一个表单通常有三个部分组成:表单域、表单标签、表单按钮。

表单标签:< form>< /form>

语法:< form action=“url(向何处发送表单数据)” method="get|post(通常使用post,对使用者的信息保护更好 )>. . .< /form>

表单元素

语法:< input type=“input元素类型” name=“input元素名称” value=“input元素的值” />

text 文本框 < input type=“text” name="…" value="…" size=“文本框长度” maxlength=“文本框最多可输入字符”/>
password 密码框 < input type=“password” name="…" size=“密码框长度” />
radio 单选按钮 < input type=“radio” name="…" value=“值” checked(按钮选中状态) />
checkbox 复选框 < input type=“checkbox” name="…" value=“值” checked(复选框选中状态) />
select 列表框 < select name="…" size=“行数”>< option value=“选项的值” select=“selected(默认选中项)”>< /option>< /select>
img 图片 < input type=“image” src=“图片路径”/>
reset 重置按钮 < input type=“reset” name="…" value=“按钮上显示的文字”/>
button 普通按钮 < input type=“button” name="…" value=“按钮上显示的文字”/>
textarea 多行文本域 < textarea name="…" rows=“显示的行数” cols=“显示的列数”>文本内容< /textarea>
file 文件域 < input type=“file” name="…" />
submit 提交按钮 < input type=“submit” name="…" value=“按钮上显示的文字”/>
email 邮件 < input type=“email” name="…"/>
url 网址 < input type=“url” name="…"/>(会自动验证url地址格式是否正确)
number 数字 < input type=“number” name="…" min=“允许的最小值” max=“允许的最大值” step=“合法的数字间隔”/>
range 滑块 < input type=“range” name="…" min=“允许的最小值” max=“允许的最大值” step=“合法的数字间隔”/>
search 搜索框 < input type=“search” name="…"/>

文本框和密码框


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<form action="#" method="post">
				<p>用户名<input type="text" name="user" maxlength="5" size="10"/>p>
				<p>密码<input type="password" name="pwd" size="10"/>p>
				<input type="submit" name="sub" value="注册"/>
				<input type="reset" name="res" value="重置"/>
		form>
	body>
html>

运行结果:
HTML基础知识day4_第1张图片
从图中我们可以看出,因为文本框设置了允许的最大值maxlength=5,所以用户名最多只能输入5个字符。而密码框使用了password的元素类型,所以输入的字符会自动变成*号,更加保险。type="reset"元素类型有重置页面的效果,点击之后当前页面会被重置。

你可能感兴趣的:(html)