学习日记——表单
1.表单的定义
①以表格的形式展现多个输入框(单),常用于网页中的注册和登录功能。
②表单的元素属性:
<input type="" name='' value="" />
input:表单元素
type:input元素类型
name:input元素名称,是提交到服务器的key,不展现在形式上
value:input元素的值,所见即所得
③代码结构如下:
<form method="post" action="result.html"> <table border="1px"> <tr><td colspan="2">登录界面</td></tr> <tr><td>用户名</td><td><input type="text" name="name" value=""/></td></tr> <tr><td>密码</td><td><input type="password" name="password" value=""/></td></tr> <tr><td> <input type="submit" value="提交" > <input type="reset" value="重置" > </td></tr> </table> </form>
2.表单的一些语法和应用
①文本框
<input type="text" name="userName" value="用户名"/>
特点:用户输入的值在页面中明文显示
②密码框
<input type="password " name="pass" size="20" />
特点:用户输入的值在页面中暗文显示
③单选按钮
男:<input type="radio" name="sex" value="男" checked/> 女:<input type="radio" name="sex" value="女" />
(1)type=”radio” 代表单选按钮(单选框)
(2)name=”xx”代表两个单选按钮保持一致的话,就是单选
(3)value=”xx”代表发送到后端服务器中的值,而不是展示
(4)checked代表初始化页面的时候默认勾选某个单选按钮,等价于checked=”checked”
④复选框
运动<input type="checkbox" name="interest" value="0"/> 聊天<input type="checkbox" name="interest" value="1" checked /> 玩游戏<input type="checkbox" name="interest" value="2"/>
(1)type=”checkbox”代表是多选框
(2)name=”xx”复选框的name值要保持一致
(3)value=”xx”代表发送到后端服务器中的值,而不是展示
(4)checked代表初始化页面的时候默认勾选某个复选框,等价于checked=”checked”
⑤列表框
<select name="列表名称" > <option value="选项的值" selected="selected">…</option > <option value="选项的值">…</option > </select>
(2)option是列表框中的标签名
(3)select和option是一对组合,不可分离
(4)value存放的值是用来发送到服务器后端的,不是用来展示的
(5)option之间的文本值是用来展示的
⑥按钮
(1)reset按钮
起到重置的作用
<form action="" method="post"> 用户名:<input type="text" value="123" /> <input type="reset" value="重置"/> </form>
(2)submit按钮
起到提交的作用,能触发页面跳转效果
<form action="demo010.html" > <input type="submit" value="提交"/> </form>
(3)button按钮
普通按钮,不能触发页面跳转效果
<form action=""> <input type="button" value="登录" /> </form>
⑦多行文本域
<form> <textarea name="" rows="" cols=""></textarea> </form>
⑧文件域
<form action="" enctype="multipart/form-data"> <input type="file" /> <input type="submit" value="上传"/> </form>