HTML表单详解与应用-优快云博客

<!--
    表单：
        1.用于数据的提交
        2.基础标签
            form标签：表单的基础标签。
            action属性：表单提交的地址。
            method属性：表单的提交方式。一般情况下从get和post中二选一。
                get方式和post的区别：
                    1.get提交内容：
                        http://127.0.0.1:8848/staticweb/html200205/result.html?nickname=nickname001&username=user01&password=123&email=123%40123&telNumber=asd&age=3&sex=1&hobby=girl&userImage=&token=adfasdf-asdfasdf-ojijij
                        1.将表单数据拼接在url地址后面
                        2.通过?分隔原地址和数据
                        3.每个键值对之间通过&分隔
                        4.键值对通过=对应
                        5.数据不安全
                        6.对数据的大小有限制(ulr地址的长度有限制)
                    2.post提交内容：
                        1.将表单数据存放 在请求体的form data中
                        2.数据相对安全
                        3.对数据的大小无限制
                        
        3.表单控件
            1.input系列
                type属性：表单控件的类型。
                    1.text：文本框
                    2.password：密码框
                    3.number：数字框
                    4.radio：单选按钮(多个按钮需要有相同的name属性)
                    5.checkbox：复选框
                    6.file：文件域
                    7.hidden：隐藏域
                    8.submit：提交按钮
                    9.reset：重置按钮
                    
                    10.email：邮箱
                    11.tel：电话号码
                    12.url：url地址
                    13.range：数字滑块，min属性和max属性设置区间
                    14.image：图片提交按钮
                    15.date：日期
                    16.time：时间
                    17.datetime：日期时间 弃用
                    18.datetime-local：替代datetime
                    19.week：周 
                    20.month：月
                    21.search：搜索
                    20.color：颜色
                    23.button：按钮
                    
                name属性：表单控件名称，表单控件填入的数据对应的键值。
                value属性：表单控件中的数据值。
                placeholder属性：表单控件中的占位内容。
                disabled属性：禁用
                readonly属性：只读
            2.其他控件：
                1.select标签：下拉选
                    option标签：下拉选的子项，value属性表示子项的值
                2.textarea标签：文本域
                    rows属性：行数
                    cols属性：列数
                3.datalist标签：数据列表
                    1.需要有id属性，引用该数据列表的表单控件，需要使用list属性指定数据列表的id。
                    2.数据列表的子项使用option标签确定，其中valllue属性为实际数据，lable属性为提示文本
                4.output标签：
                    计算内容输出。
                    
                        
-->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body style="height: 2000px;">
		
		<form action="result.html" method="get">
			昵称：<input type="text" name="nickname" value="nickname001">
			<br>
			用户名：<input type="text" name="username" placeholder="请输入不超过10位用户名">
			<br>
			密码：<input type="password" name="password">
			<br>
			邮箱：<input type="email" name="email">
			<br>
			电话：<input type="tel" name="telNumber">
			<br>
			年龄：<input type="number" name="age"/>
			<br>
			性别：<input type="radio" name="sex" value="1">男
				<input type="radio" name="sex" value="0">女
				<input type="radio" name="sex" value="2">未知
			<br>
			爱好：<input type="checkbox" name="hobby" value="money">金钱
				<input type="checkbox" name="hobby" value="girl">女人
				<input type="checkbox" name="hobby" value="java">JAVA
			<br>
			头像：<input type="file" name="userImage"/>
			<br>
			<input type="hidden" name="token" value="adfasdf-asdfasdf-ojijij" />
			<br>
			省份：
			<select name="province">
				<option value="anhui">安徽</option>
				<option value="beijing">北京</option>
				<option value="jiangsu">江苏</option>
				<option value="shanghai">上海</option>
				<option value="hubei">湖北</option>
			</select>
			<br>
			备注：
			<textarea name="remark" rows="10" cols="30"></textarea>
			<br>
			个人主页：<input type="url" name="myPage">
			<br>
			0<input type="range"/>100
			<br>
			<input type="image" src="img/spider.jpg" width="100px"/>
			<br>
			<input type="submit" value="注册">
			<input type="reset" value="重置">
		</form>
		
		<hr>
		
		<form action="#" method="get">
			用户名：<input type="text" name="username" list="username_list"/>
			<datalist id="username_list">
				<option label="王子玉" value="wzy"></option>
				<option label="韩文龙" value="hwl"></option>
				<option label="金春晓" value="jcx"></option>
			</datalist>
			网址：<input type="url" name="webaddress" list="url_list">
			<datalist id="url_list">
				<option label="百度" value ="http://www.baidu.com"></option>
				<option label="淘宝" value ="http://www.taobao.com"></option>
				<option label="4399" value ="http://www.4399.com"></option>
			</datalist>
		</form>
		
		<hr >
		
		<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
			0<input type="range" id="a" min="0" max="10"/>10 
			+
			<input type="number" id="b"/>
			=
			<output name="result" for="a b"></output>
		</form>
		
		<hr >
		
		<form oninput="username.value = x.value + y.value">
			姓氏：<input type="text" id="x">
			名字：<input type="text" id="y">
			姓名：<output name="username" for="x y"></output>
		</form>
		
		<hr >
		
		<form action="#" method="get">
			日期：<input type="date">
			<br>
			时间：<input type="time">
			<br>
			日期时间：<input type="datetime">
			<br>
			日期时间：<input type="datetime-local"/>
			<br>
			周：<input type="week"/>
			<br>
			月：<input type="month"/>
			<br>
			搜索框：<input type="search" />
			<br>
			颜色选框：<input type="color" name="color">
			<br>
			禁用：<input type="text" disabled="disabled" value="user01">
			<br>
			只读：<input type="text" readonly="readonly" value="user02">
			<br>
			<input type="button" value="按钮1"/>
			<br>
			<input type="submit"/>
			<br>
			<input type="reset"/>
		</form>
		
	</body>
</html>