<!DOCTYPE HTML> <html> <head> <title>用户登录的表单</title> </head> <body> <!-- form:表单 我们与服务器进行交互的地方 action:表单提交的地址 method:提交的方式 01.get:会在url中显示用户输入的信息 不安全 02.post:不会在url中显示用户输入的信息 相对安全 --> <form action="login.html" method="post"> <!--表单元素 name:相当于一个标记，目的就是 ：服务器获取我们的输入 text：文本输入框 password：密码框 submit：提交按钮 button：普通按钮，不具有提交表单的功能 --> <p> 用户名：<input type="text" name="userName"/></p> <p> 密码：<input type="password" name="pwd"/></p> <input type="submit" value="登录"> <input type="button" value="按钮"> <input type="reset" value="重置"> </form> </body> </html>
需要的login.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>用户登录成功！</h1> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>用户登录的表单</title> </head> <body> <form action="login.html" method="post"> <!-- value：元素的初始值！ 服务器通过name属性值获取value属性值 placeholder:占位符，给用户一个友好的提示 --> <p> 用户名：<input type="text" name="userName" value="请您输入用户名"/></p> <p> 用户名：<input type="text" name="userName" placeholder="请您输入用户名" /></p> <input type="submit" value="登录"> </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>用户登录的表单</title> </head> <body> <form action="" method="post"> <!-- size:规定了文本框的长度 maxlength:文本框中输入的最大字符数 --> <p> 用户名：<input type="text" name="userName" size="50" /></p> <p> 用户名：<input type="text" name="userName" maxlength="10" /></p> <input type="submit" value="登录"> </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>单选按钮</title> </head> <body> <form action="" method="post"> <!-- 单选按钮 type="radio" name：属性值要相同！保证只能选择一个！ value：必须要设置，如果不设置，后台无法获取我们的选择！ checked:默认被选中 --> <input type="radio" name="sex" value="男" checked/>男 <input type="radio" name="sex" value="女"/>女 </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>复选框</title> </head> <body> <form action="" method="post"> <!-- 复选框 type="checkbox"' name:保证一致，用于后台的获取！ value：后台获取的数据 checked:默认被选中 --> <input type="checkbox" name="love" value="sports">运动 <input type="checkbox" name="love" value="talk" checked>聊天 <input type="checkbox" name="love" value="play">玩游戏 <input type="checkbox" name="love" value="song">唱歌 </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>列表框</title> </head> <body> <form action="" method="post"> <!-- 列表框 select size="4"：下拉列表的高度 option：下拉框中的每一项 value：用户选中后，后台获取的值 selected:默认被选中！ --> <select> <option value="January">1月份</option> <option value="February" selected>2月份</option> <option value="March">3月份</option> <option value="April">4月份</option> <option value="May">5月份</option> <option value="June">6月份</option> <option value="July">7月份</option> <option value="August">8月份</option> <option value="September">9月份</option> <option value="October">10月份</option> <option value="November">11月份</option> <option value="December">12月份</option> </select> </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>表单元素</title> </head> <body> <!--enctype:表单的编码属性 如果表单中有文件上传的功能，必须设置multipart/form-data --> <form action="#" method="post" enctype="multipart/form-data"> <!-- 按钮--> <input type="button" value="普通按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮"> <!--图片按钮 <input type="image" src="images/1.png">--> <!--多行文本域 cols:列数 row:行数 --> <textarea name="textContent" cols="10" rows="10"> 默认的文本值 </textarea> <!--文件域--> <input type="file" name="files"><br/> <!--邮箱 自动验证email输入是否正确--> 邮箱: <input type="email" name="email" required><br/> <!--网址 自动验证url输入是否正确--> 网址: <input type="url" name="myUrl"><br/> <!--数字 min:可以输入的最小值 max:可以输入的最大值 step:合法的数字间隔 --> 数字:<input type="number" name="num" min="0" max="120" step="10"/><br/> <!--滑块--> <input type="range" name="ran" min="0" max="120" step="20"><br/> <!--搜索框--> <input type="search" name="s"> <!--日期--> <input type="date" min="1990-01-01"> <input type="date" max="2016-12-09"> </form> </body> </html>
<!DOCTYPE HTML> <html> <head> <title>表单元素</title> </head> <body> <form action="#" method="get" > <!--readonly:只读属性！不允许修改!--> 用户名：<input type="text" name="userName" value="admin" readonly> <input type="button" value="登录禁用" disabled> <!--button:默认的type值是submit--> <button type="submit" >登录</button> <!--隐藏域 在页面上不会显示 但是 后台还是通过name属性值获取value属性的值--> <input type="hidden" name="password" value="haha"><br/> <!--label:自动将焦点移动到关联的表单元素上！--> <label for="pwds">密码：</label> <input type="password" name="pwd" id="pwds"><br/> <label>确认密码：<input type="password" name="rePwd"/></label> <input type="radio" name="sex" required>男 <input type="radio" name="sex">女 <!-- 正则表达式--> 手机号:<input type="text" name="phone" pattern="^1[34578]d{9}$"/> </form> </body> </html>