表单应用/语法/属性

目录

1.表单

（1）定义：以开发角度的定义：多个输入框（单）及按钮等元素以表格的形式展示

（2）应用场景：最常见的是网站页面中的登录或是注册功能

（3）表单的代码结构

<form>

         <table border="1px solid black">

                 <tr><td colspan="2">登录页面</td></tr>

                <tr>

                       <td>用户名：</td><td><input type="text"/></td> 

                </tr>

                <tr>

                       <td>密码：</td><td><input type="password"/></td>

                </tr>

                <tr>

                        <td colspan="2">

                                  <input type="submit" value=“提交”/>

                                   <input type="reset" value="重置"/>

                        </td>

                 </tr>

           <table>

</form>

 

 

(4) 表单元素属性

 <input type="text" name="" value""/>

type:指定当前元素的类型

value：所见即所得，默认初始化可看到的

name：提交到后服务器的值key

2.文本框

<input type="text"/>

特点1：type="text"   用户输入的值在页面中明文显示

特点2：value=""   默认的值

3.密码框

<input type="password"/>

特点：type="password" 用户输入的值在页面中暗文显示

4.单选按钮（框）

<form action="">

          男：<input type="radio" name="sex" value="1" />

          女：<input type="radio" name="sex" value="0" checked="checked" />

</form>

特点1：type="radio"  代表是单选按钮

特点2：name="XX"  代表两个单选按钮如果保持一致的话，带via哦是单选，否则是多选

特点3：name="XX"  代表发送到后服务器中的值，而不是展示

特点4：checked   代表初始化页面的时候默认勾选某个单选框，等价于checked=checked

5.复选按钮（框）

<form>

          香蕉：<input type="checkbox" name="love" value="0">

          苹果：<input type="checkbox" name="love" value="1">

           橘子：<input type="checkbox" name="love" value="2" checked="checked"/>

</form>

特点1：type="checkbox" 代表是多选按钮

特点2：name="XX" 注意点：多个多选框按钮需要保持name的值保持一致

 特点3：value="XX" 代表发送到后端服务器中的值，而不是展示

特点4：checked代表初始化页面的时候默认勾选某个多选框，等价于checked=checked

6.列表框

特点1：select是列表框中表的标签名

特点2：option是列表框中列的标签名

特点3：select和option是一对组合，不可分离

特点4：value存放的值是用来发送到服务器后端的，不是用来展示的

特点5：option之间的文本值是用来展示的

<select>

          <option value="0">中国</option>

          <option value="0">中国</option>

          <option value="0">中国</option>

</select>

7.图片按钮

（1）reset

定义：重置

<form action="">

         用户名：<input type="text" /><br />

          <input type="reset" value="重置" /><br />

</form>

（2）submit

定义：提交

 特点1：form中action存放了demo010.html页面的全路径

特点2：type="submit" 触发了当前表单，并跳转到action中的页面

<form action="demo010.html">

          <input type="submit" value="提交">

</form>

 8.多行文本域

<textarea></textarea>

9.文件域

<form action="" enctype="multipare/form-data">

          <input type="file" />

          <input type="submit" value="上传" />