表单_1

表单

在网页中主要负责数据采集功能，一个表单有三个基本组成部分： 表单标签、 表单域和表单按钮

表单语法

        <!-- form表单标签 action表示向何处发送表单数据 method发送表单数据的方式-->
		<form action="ceshi.html" method="post">
			<!-- type类型 nameinput元素名称 valueinput默认值 maxlength输入字符个数 size input宽度-->
			<p>
				<input type="text" name="userName" value="123" maxlength="6" size="1">
			</p>
			<p>
				<input type="password" name="pwd"/>
			</p>
			<p>
				<input type="submit" />
				<input type="reset" />
			</p>
		</form>

get:表单上的内容会完全显示在地址栏上，而post则不会，通常采用post方式提交表单数据

表单元素的格式

            <!-- type input元素类型 name input元素名称 value input元素的值 
			maxlength输入字符个数 size表单元素的宽度-->
			<p>
				<input type="text" name="userName" value="123" maxlength="6" size="1">
			</p>

表单元素

文本框

            <p>
				<!-- type 文本框 name 文本框名称 value 文本框初始值
				 maxlength 文本框可输入最大字符数 size文本框长度-->
				<input type="text" name="userName" value="123" maxlength="6" size="1">
			</p>

密码框

            <p>
				<!-- type密码框 name密码框名称 size密码框的长度 -->
				<input type="password" name="pwd" size="6"/>
			</p>

提交、重置按钮

                <!-- type提交、重置 name名称 value按钮上显示的文字  -->
				<input type="submit" name="submit" value="提交按钮" />
				<input type="reset" name="reset" value="重置按钮"/>

单选按钮

                <!-- radio 单选 name需要一致表示互斥 ?radio1=1#表示value的值而不是后面写的1 checked单选按钮选中状态 -->
				<input type="radio" name="radio1" value="1" checked>1<br />
				<input type="radio" name="radio1" value="2" />2

复选框

                <!-- checked复选框 name一致 value值 checked复选框选中状态 -->
				<input type="checkbox" name="333" value="basketball" checked />篮球
				<input type="checkbox" name="333" value="football" />足球
				<input type="checkbox" name="333" value="music" />音乐
				<input type="checkbox" name="333" value="cooking" />做饭

列表框

            <!-- select列表框 name只有一个  -->
			<select name="job">
				<!-- value选项值 -->
				<option value ="teacher">教师</option>
				<option value ="student">学生</option>
				<!-- selected 默认选中 -->
				<option value ="worker" selected>工人</option>
				<option value ="encourage">鼓励师</option>
			</select>

图片按钮

            <!-- type图片按钮 src 图片路径 -->
			<input type="image" src="img/img1.png">

文本域

            <!-- textarea文本域 name名称 cols显示的列 rows显示的行-->
			<textarea name="words"  rows="10" cols="100">文本内容</textarea>

页面展示：

邮箱

            <!--email邮箱 输入框会自动验证email格式是否正确  -->
			<p>
				<input type="email" name="email">
				<input type="submit"/>
			</p>

文件

            <!-- file文件 -->
			<p>
				<input type="file" name="files"/>
				<input type="submit" value="点我上传" name="upload">
			</p>

页面展示：

网址

            <!-- url 输入框会自动验证url格式是否正确-->
			<p>
				<input type="url" name="url">
				<input type="submit">
			</p>

页面展示：

数字

            <!-- number数字 min最小值 max最大值 step合法的数字间隔 value默认值-->
			<p>
				<input type="number" name="num"min="0" max="100" step="3" value="4">
				<input type="submit">
			</p>

页面展示：

滑块

            <!-- range滑块 min最小值 max最大值 step合法的数字间隔 value默认值 -->
			<p>
				<input type="range" name="range" min="1" max="50" step="3" value="5">
				<input type="submit">
			</p>

页面展示：

搜索框

           <!-- search搜索框 -->
			<p>
				<input type="search" name="search">
				<input type="submit">
			</p>

页面展示：

一般按钮

                <input type="button" value="input按钮框" onclick="javascript:alert('你好')">
				<button onclick="javascript:alert('你好')">button框</button>

页面展示：