表单由三个部分组成,分别是表单域、表单控件、提示信息(也就是默认显示的内容)
表单域 使用form标签定义 将所有的元素信息定义在一块区域中 用于将表单中的所有元素信息提交给服务器
其中:action表示该表单将要提交到哪个地址,method表示使用post还是get方法,name是给表单域起了个名字
<form action="demo.php" method="post" name="name1"></form>
表单控件 也就是表单元素 包括input输入表单元素、select下拉表单元素、textarea文本域元素
- input输入表单元素
input输入表单元素有很多属性,
其中:
- 添加input的value属性 其中name和value属性主要是给后台人员使用 ,所以在提交的时候必须加上name属性。
- 单选按钮和复选按钮都可以使用checked属性,当页面打开的时候默认选中状态
- 添加input的name属性:单选框和复选框都要有相同的name值
- maxlength 规定用户最多指定输入六个字符
- 使用submit属性可以将表单域提交到跟后台指定的地址,重置reset可以将表单元素输入的值清空
- button按钮和文件域
<form action="xxx.php" method="get"><!-- text文本框 用户可以输入任何文字 -->用户名: <input type="text" name="'usename" value="请输入" maxlength="6"><br><!-- password密码框 用户看不到输入的密码 -->密码: <input type="password" name="pwd"><br><!-- radio单选框 可以实现多选一 -->性别: 男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex"value="女">人妖<input type="radio" name="sex" value="人妖"><br><!-- checkbox 可以实现多选框 -->爱好:吃饭<input type="checkbox" name="hobby" value="爱好"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<inputtype="checkbox" name="hobby" value="打豆豆"><br><input type="submit" value="免费注册"><br><input type="reset" value="重新填写"><br><!-- button不可以用来提交表单 但是可结合js来获取短信验证码 --><input type="button" value="获取短信验证码"><br><!-- 文件域 上传文件 -->上传头像:<input type="file"></form>
常常用form表单结合使用的标签元素,label,这样不仅表达控件选中,不用点击表单控件,它对应的文字和图表也可以实现该表单元素的点击
<input type="radio" id="nan"> <label for="nan">男</label>
- select下拉表单元素
<form>籍贯:<select><option>山东</option><option>济南</option><option selected="selected">上海</option><option>海南</option></select></form>
- textarea文本域元素
<form>文本域:<textarea>可以输入大量文字,用于反馈留言</textarea></form>