表单域
<form> <fieldset> <legend>个人信息:</legend> <input type="" id="" name="" value=""> </fieldset></form>
复制代码
fieldset 表单外边框（具有美观作用，写不写都可，如下图）
legend 必须在<fieldset></fieldset>标签中使用，表单外边框左上角的文字
文本域
文本域常用作留言板、注册时自我介绍等地方
<textarea cols="30" rows="10"></textarea>
复制代码
rows：行数，cols：列数
效果图如下
label 标签
<input></input>与<label></label>标签配合使用可实现使输入框更容易获取鼠标焦点功能，有利于提升体验，实现途径有两种：
方法一：
<label for="username">账号：</label><input type="text" id="username">
复制代码
在<label>中定义”for“属性，在<input>中定义”id“属性，for 属性的值与 id 属性的值相同，即可实现。
方法二：
<label>密码： <input type="password"></label>
复制代码
将<input>标签放在<label></label>中，可实现同样的效果。使用这种方式时 label 标签中不能有其他属性。
input 的 type 属性值
text 文本框
<input type="text" name="name" value="这会默认显示在输入框中">
复制代码
password 密码框 （输入的文本会被隐藏）
<label>密码： <input type="password" name="psw" placeholder="请输入密码"></label>
复制代码
email 邮箱框 （会自动检查格式）
<label>邮箱： <input type="email" name="email" disabled></label>
复制代码
number 数字框
<label>电话： <input type="number" name="phone"></label>
复制代码
date 日期框 （自动出现选择日期的按钮）
<label>生日： <input type="date" name="bir"></label>
复制代码
radio 单选框（input 标签必须使用相同的 name 值才能实现单选效果）
<label>男 <input type="radio" name="gender" value="male"></label><label>女 <input type="radio" name="gender" value="famale"></label>
复制代码
checkbox 复选框（input 标签必须使用相同的 name 值才能实现单选效果）
<label>吃饭 <input type="checkbox" name="hobby" value="eat"></label><label>睡觉 <input type="checkbox" name="hobby" value="sleep"></label><label>打豆豆 <input type="checkbox" name="hobby" value="play"></label>
复制代码
button 普通按钮（type 定义类型，value 值是按钮上显示的文字）
<input type="button" value="普通按钮">
复制代码
reset 重置按钮
<input type="reset" value="重置按钮">
复制代码
submit 提交按钮
<input type="submit" value="提交按钮">
复制代码
image 图片
<input type="image" src="images/btn.png">
复制代码
file 上传文件
input 的属性值
action="" 表单的提交地址
method="" 表单的提交方式（POST GET）
type="" 类型
name="" 表单组件的名字
value="" 值
placeholder="" 输入框中的提示信息，获取鼠标焦点后自动消失
disabled 禁用表单
checked=”checked” 默认选中指定的选项
button 按钮
<button value="button">普通按钮</button><button value="reset">重置按钮</button><button value="submit">提交按钮</button>
复制代码
button 按钮可通过 input 标签实现，功能相同。
下拉框
<select name="city"> <option value="zhengzhou">郑州</option> <option value="shanghai">上海</option> <option value="beijing">北京</option></select>
复制代码
name 值与 value 值用于向后台传递数据时方便分割与整理。
代码主体
<form action="" method=""> <fieldset> <legend>账号信息:</legend> <p> <label for="username">账号：</label> <input type="text" id="username" name="name" value="这会默认显示在输入框中"> </p> <p> <label>密码： <input type="password" name="psw" placeholder="请输入密码"></label> </p> <p> <label>邮箱： <input type="email" name="email" disabled></label> </p> <p> <label>电话： <input type="number" name="phone"></label> </p> </fieldset> <fieldset> <legend>个人信息:</legend> <p> <label>生日： <input type="date" name="bir"></label> </p> <p> 性别： <label>男 <input type="radio" name="gender" value="male"></label> <label>女 <input type="radio" name="gender" value="famale"></label> </p> <p> 爱好： <label>吃饭 <input type="checkbox" name="hobby" value="eat"></label> <label>睡觉 <input type="checkbox" name="hobby" value="sleep"></label> <label>打豆豆 <input type="checkbox" name="hobby" value="play"></label> </p> <p> 城市： <select name="city"> <option value="zhengzhou">郑州</option> <option value="shanghai">上海</option> <option value="beijing">北京</option> </select> </p> <p> <textarea cols="30" rows="10" name="beizhu"></textarea> </p> <p> <input type="image" src="../作业2/6综合案例/images/btn.png"> </p> <input type="button" value="普通按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮"> <br> 上传头像：<input type="file"> <br> <button value="button">普通按钮</button> <button value="reset">重置按钮</button> <button value="submit">提交按钮</button> </fieldset></form>
复制代码
效果图
评论