1、文本框
文本框:
<input type="text" name="user" value="用户名" size="10" maxlength="10">
2、密码框
<!-- HTML5标准下 自闭合标签末尾加不加斜杆都可以 -->
密码框:
<input type="password" name="pwd" size="20" >
3、单选按钮
<!-- 两个单选框里面的name 值必须保持一致,否则不能起到二选一的或者多选一 的作用 -->
<!-- checked: 表示一开始默认选中哪一个,多个单选不要都加上checked,否则以最后一个为准 -->
性别:
男 <input name=“gen” type="radio" value="男" checked>
女 <input name=“gen” type="radio" value="女" >
中性 <input name="gen" type="radio" value="中性">
4、 复选框
你橱柜中的包包:
<input type="checkbox" name="baobao" value="lv">LV包
<input type="checkbox" name="baobao" value="guchi">古驰
<input type="checkbox" name="baobao" value="xnr">香奈儿
5、 列表框
<!-- 在列表框 size表示列表框的行数 -->
<!-- selected="selected" 表示默认的选中那一项 可以简写成selected -->
<!-- value是要写的,这里写的意思是提交给后台服务器的值 -->
<select name="cars" size="1">
<option value="audio">奥迪</option>
<option value="bmv" selected>宝马</option>
<option value="bc">奔驰</option>
</select>
6、按钮
6.1重置按钮
<!-- value:是按钮上显示的文字 -->
<!-- 这里最外面一定要加上form这个标签,否则不生效 -->
<!-- 快速打出reset标签 input:reset -->
<input type="reset" name="resetName" value="重置按钮">
6.2提交按钮
<!-- 点击提交按钮,会还原之前的表单数据的内容,然后把编辑好的数据发送给服务器 -->
<!-- 在资源管理器里面双击打开,不要用其他插件 -->
<input type="submit" name="submitName" value="提交按钮">
6.3 普通按钮
<!-- 只是一个单纯的按钮 -->
<input type="button" name="btn" value="普通按钮">
6.4图片按钮
<!-- src: 图片路径 -->
<!-- ./和不写是一回事,都是在当前路径下去寻找图片 -->
<!-- 图片按钮也起着提交表单的作用 -->
<input type="image" src="图片路劲地址" width="50" height="50">
7、多行文本域
<!-- cols 可以改变文本域的宽度 列数-->
<!-- rows 可以改变文本域的高度 行数 -->
<textarea name="showText" cols="30" rows="10"></textarea>
8、文件域
上传文件:<input type="file" name="fileName" >
<!- 隐藏域 -->
<!-- 隐藏域就是不显示该表单,但是点击提交的时候也会把name,value 的值提交给后台 -->
<!-- 一般的用途是:不需要用户操作什么,只想把这个默认的数据值提交给后台 -->
隐藏域:<input type="hidden" name="hiddenName" value="666">
9、只读文本框
<!-- 设置readonly 属性, 就可以成为只读的文本属性 -->
只读文本框:<input type="text" name="zhidu" value="只可以看哦" readonly>
10、禁用
<!-- 前面一个单词小写后面一个单词大写,叫做驼峰命名 -->
<!-- 一般用于:比如一个需求,用户还没有输入数据不可以点击提交按钮,拍用户做一些无效点击,一点击就会发送给服务器,所以可以采用置灰的办法,阻止用户频繁点击提交按钮 -->
<input type="submit" name="disBtn" value="我置灰了"
disabled>
readonly 和 diabled的两种写法
第一种写法:readonly="true" disabled="true"
第二种写法:readonly diabled
效果图: