表单域 form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单域</title> </head> <body> <form action="提交地址" method="提交类型"> <fieldset> <legend>表单标题</legend> </fieldset> </form> <!-- form 表单域 所有的表单元素都放在表单域内 - action 提交地址,提交的url - method 提交类型 - get 和post 后续ajax会详细讲解 --> </body> </html>表单元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单元素</title> </head> <body> <form action="提交地址" method="提交类型"> <fieldset> <legend>表单标题</legend> <!-- 1.文本框 --> 姓名：<input type="text" name="user"><br> <!-- 2.密码框 --> 密码：<input type="password" name="pwd"><br> <!-- 3.单选框 --> 你的性别是?<br> <input type="radio" name="sex">男 <input type="radio" name="sex">女<br> <!-- 4.复选框 --> 你喜欢的水果?<br> <input type="checkbox" name="">苹果 <input type="checkbox" name="">橙子 <input type="checkbox" name="">葡萄<br> <!-- 5.下拉列表 --> <select> <option>1</option> <option>2</option> <option>3</option> </select><br> <!-- 6.上传按钮 --> <input type="file" name=""><br> <!-- 7.文本域 --> <textarea name=""> </textarea><br> <!-- 8.提交按钮 --> <input type="submit" name=""><br> <!-- 9.重置按钮 --> <input type="reset" name=""><br> <!-- 10.普通按钮 --> <input type="button" name="" value="普通按钮"><br> <!-- 11.图片按钮 --> <input type="img" name=""><br> </fieldset> </form> </body> </html>label 标签的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>label标签</title> </head> <body> <label for="user"> 用户名：<input type="text" name="user" id="user"><br><br> </label> <label for="pwd"> 密码：<input type="password" name="pwd" id="pwd"> </label> <p>点击用户名和密码试试</p> </body> </html>