学习日记——表单

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>

（1）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>