HTML 表单元素

表单 form 主要用来将用户的填写的信息提交给后台处理。
表单页面展示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<!-- 表单的作用:收集信息 -->
	<title>表单</title>	
</head>
<body>

	<!-- action:决定谁处理它-- >
	<!--method="get\post"get通过地址栏传输信息安全性差;post通过1.PHP处理信息--> 	
	<form action="1.PHP" method="post">
		
		<fieldset>
			<legend>分组信息</legend>	
		<!-- 输入框的属性;readonly:只读;disable:输入框未激活状态 -->
		<!-- <label for="username"></label> -->用户名:<input type="text" maxlength="6" name="username" value="用户名" id="username">
		<br>
		<br>&nbsp;码:<input type="password" name="password">
		<br>
		<br>
		

        <!-- 单选框name设置相同才能实现单选效果 -->
        <!-- checked="checked"设置默认选中项-->
        性别&nbsp;<input type="radio" name="gender" checked="chkeced"><input type="radio" name="gender"><br>
        <br>
        
        <!-- 下拉列表 -->
        省(市):<select>
            	   <option >甘肃</option>
           		    <!-- secected="selected"设置默认选中项 -->
        		   <option selected="selected">北京</option>
        		   <option >河北</option>
        		   <option >山东</option>
        		   <option >陕西</option>
               </select>
        市(区):<select>
					<optgroup label="北京市">
            		    <option >昌平区</option>
            		    <option selected="selected">海淀区</option>
        			    <option >朝阳区</option>
        			    </optgroup>
        		</select>
        <br>
        <br>

        <!-- 多选框 -->
        <input type="checkbox" checked="checked">同意
        <input type="checkbox" checked="checked">已阅读
        <br>
        <br>

        <!-- 多行文本框:比如:个人评价等 -->
        <!-- cols:控制输入字符的长度rows:控制输入字符的行数 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
		<br>
        <br>
        <!-- 文件上传控件 -->
        <input type="file">
        <br>
        <br>
		
		<!-- 重置按钮 -->
        <input type="reset">
        
        <!-- 文件提交按钮 -->
        <input type="submit">
		<br>
        <br>

		<!--普通按钮,不能提交信息,配合JS使用  -->
		<!-- <input type="button" name="" value="普通按钮"> -->

		<!-- 图片按钮 -->
		<input type="image" src="按钮.jpg" width="45" height="25">
        </fieldset>
	</form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值