我的web全栈工程师之旅之HTML入门教学二：表单、框架、html5新增元素

一、表单组件

1、表单

表单是前段不可或缺的元素，是前段向后台发送数据的方式

<!--表单语法-->
		<form action="result.html" method="post/get" enctype="multipart/form-data">
			表单组件
		</form>

2、表单元素

大部分表单元素都可以被后台获取，除了hidden的input元素

<!--表单元素-->

		<form action="result.html" method="post/get" enctype="multipart/form-data">
			
			<!--文本框-->
			<input type="text" name="username" value="hellc" placeholder="用户名" /><br />
			<!--密码框-->
			<input type="password" name="pwd" size="20"  /><br />
			<!--单选按钮-->
			<input name="sex" type="radio" value="男" checked="checked" />男
			<input name="sex" type="radio" value="女"  />女<br />
			<!--复选框-->
			<input type="checkbox" name="interset" value="sports" />运动
			<input type="checkbox" name="interset" value="talk" checked="checked"/>聊天
			<input type="checkbox" name="interset" value="play" checked="checked" />玩游戏<br />
			<!--列表框-->
			<select name="province" size="5">
				<option value="1">安徽省</option>
				<option value="2">东北省</option>
				<option value="3">湖南省</option>
				<option value="4">湖北省</option>
				<option value="5">河北省</option>
				<option value="6">甘肃省</option>
				<option value="7">江苏省</option>
				<option value="8">黑龙江省</option>
			</select>
			<br />
			<!--按钮-->
				<!--提交按钮-->
				<input type="submit" value="提交按钮"/><br />
				<!--重置按钮-->
				<input type="reset" value="重置按钮"/><br />
				<!--普通按钮-->
				<input type="button" value="普通按钮"/><br />
				<!--图片按钮-->
				<input type="image"  src="images/login.jpg"/><br />
			<!--文本域（多行文本框）-->
			<textarea name="showText" cols="2" rows="5">
				this text is so easy!
			</textarea><br />
			<!--文件域-->
			<input type="file" name="files" /><br />
			<!--隐藏域-->
			<input type="hidden" value="888" name="userId"/><br />
			<!--只读文本-->
			<input name="username" type="text"  value="张三" readonly="readonly"/><br />
			<!--禁用-->
			<input type="search" disabled="disabled" value="提交" /><br />
			
			<!--html5新的表单元素-->
			<!--email--> 
			<input type="email" placeholder="请输入邮箱" required />  <br />
			<!--url--> 
			<input type="url"  /><br />
			<!--number-->
			<input type="number" value="7" min="1" max="10" step="3" /><br />
			
			<!--Date--> 
			<input type="date" /><br />
			<input type="datetime" /><br />
			<input type="datetime-local" /><br />
			<!--search--> 
			<input type="search" placeholder="请输入要查询的宝贝" list="shops" /> 
			    <datalist id="shops">
			        <option>食品</option>
			        <option>电器</option>
			        <option>足球用品</option>
			        <option>篮球用品</option>
			    </datalist>
<br />
			<!--color--> 
			<input type="color"/><br />
			
			
		</form>

效果展示：

3、fieldset

<fieldset >
			<legend>用户登陆</legend>
			<label for="usernameid">用户名：</label>
			<input id="usernameid" type="text" name="username" placeholder="用户名" size="20"/><br />
			<label for="pwdid">密&nbsp;&nbsp;码 ：</label>
			<input id="pwdid" type="password" name="pwd" size="20"/><br />
			&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="登陆" />&nbsp;&nbsp;<input type="reset" value="重新输入" />
		</fieldset>

效果展示：

4、iframe内联框架

是解耦页面的一种的方式，方便开发

<iframe src="引用页面地址" name="框架标识名" frameborder="边框大小" scrolling="是否出现滚动条：yes/no" noresize="是否允许调整框架大小 ：noresize" width="100px"height="200px"></iframe>
		

效果展示：

ps：应为这里没有加资源文件，所以不显示，只需在src里加入引用地址即可

 

5、H5新增元素

<!--多媒体-->
		<!--视频-->
		<video src="res/mov_bbb.ogg" autoplay="autoplay" loop="loop" controls="controls">
		        您使用的浏览器不支持video！
		</video><br />

		<!-- 音频-->
		<audio src="res/song.mp3" autoplay="autoplay" loop="loop" controls="controls">
		        您使用的浏览器不支持audio!
		</audio>

效果展示：

视频：

音频：

 

 

整理自鲁班学院课堂笔记