HTML之表单学习记录

如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

在HTML中，表单标签有五种：form、input、textarea、select和option。

表单效果：

从外观上来划分，表单可以分为以下八种。

单行文本
框密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

创建一个表单，就像创建一个表格，我们也必须要把所有表单标签放在form标签内部。

form标签常用属性如表：

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个，一个是get，另外一个是post。get在安全性较差，而post安全性较好。所以在实际开发中，我们都是使用post。

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

在form标签中，target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到_blank这一个属性值。

在HTML中，大多数表单都是使用input标签来实现的。

练习题：

代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表单练习题</title>
</head>
<body>
    <form method="post" >
        昵称：<input type="text" name="nickname" size="20"/><br/>
        密码：<input type="passwword" name="password" size="20"/><br/>
        邮箱：<input type="email" name="email" size="20"/>&nbsp;&nbsp;
        <select>
            <option value="qq.com">qq.com</option>
            <option value="163.com">163.com</option>
            <option value="gmail.com">gmail.com</option>
            <option value="yahoo.com">yahoo.com</option>
        </select><br/>
        性别：<input type="radio" name="sex" value="男" checked/>男
        <input type="radio" name="sex" value="女"/>女<br/>
        爱好：<input type ="checkbox" name="旅游"/>旅游
        <input type="checkbox" name="摄影"/>摄影
        <input type="checkbox" name="运动"/>运动<br/>
        个人简介：<br/>
        <textarea name="intro" rows="5" cols="50"></textarea><br/>
        上传个人照片：<br/>
        <input type="file" name="photo"><br/>
        <hr/>
        <input type ="submit" value="立即注册" /><br/>
    </form>
</body>
</html>

效果图：

练习过程的代码：

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
       
    </head>
    <body>
        <!-- input、textarea、select、option都是表单标签，我们必须要放在form标签内部 -->
        <form name="MyForm" method="post">
            <input type="text" value="这是一个单行文本框"/><br/>
            <textarea>这是一个多行文本框</textarea><br/>
            <!-- 下拉列表 -->
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select><br/>
            <!-- 单行文本框 -->
            <!-- value属性：显示默认值，size属性：设置输入框的宽度，maxlength属性：设置输入框的最大长度 -->
            姓名：<input type="text" value ="张三" size="10" maxlength="10"/><br/>
            <!-- 密码框 -->
            密码：<input type="password" value="123456" size="5" maxlength="10"/><br/>
            <!-- 单选框 -->
            <!-- name属性表示单选按钮所在的组名，互斥用；而value表示单选按钮的取值(不显示)，这两个属性必须要设置。 -->
             性别：<input type="radio" name="gender" value="男"/>男
             <input type="radio" name ="gender" value="女"/>女<br/>
             <!-- 默认checked属性表示默认选中 -->
             性别：<input type="radio" name="gender" value="男" checked/>男
             <input type="radio" name ="gender" value="女"/>女<br/>
             <!-- 没有加上name属性，预览效果好像没有变化。但是当我们选取的时候，会发现居然可以同时选中两个选项 -->
             <!-- 因此我们必须要加上name属性。有小伙伴就会问了：在同一组单选框中，name属性取值一样 -->
              年龄：<input type="radio" name="age" value="18"/>
              <input type="radio" name="age" value="19"/>
              <input type="radio" name="age" value="20"/><br/>

              年龄：18<input type="radio" name="age" value="18"/>
              19<input type="radio" name="age" value="19"/>
              20<input type="radio" name="age" value="20"/><br/>
              <!-- 对于单选框，加不加value好像没啥区别啊？为啥还加上呢？value属性取值一般跟后面的文本相同，
               之所以加上value属性，是为了方便JavaScript或者服务器操作数据。所有表单元素的value属性的作用都是一样的 -->
               
              <!-- 为了得到更好的语义化，表单元素与后面的文本一般都需要借助label标签关联起来。 -->
              年龄：<label>
                18<input type="radio" name="age" value="18"/>
               </label>
               <label>
                19<input type="radio" name="age" value="19"/>
               </label>
               <label>
                20<input type="radio" name="age" value="20"/>
               </label><br/>
               <!-- 复选框 -->
                <input type="checkbox" name="组名" value="取值"/>复选框1<br/>

                你喜欢的水果：<br/>
                <input type="checkbox" name="fruits" value="苹果" checked/>苹果
                <input type="checkbox" name="fruits" value="香蕉" checked/>香蕉
                <input type="checkbox" name="fruits" value="橘子"/>橘子<br/>
                <!-- 按钮 -->
                <!-- 在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。 -->
                 <input type="button" value="确定" onclick="alert('确定按钮被点击了！')"/>
                 <!-- 提交按钮 -->
                  <input type="submit" value="提交"/>
                  <!-- 重置按钮 -->
                  <!-- 在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。 -->
                  <!-- 重置按钮只能清空它所在form标签内表单中的内容，对于当前所在form标签之外的表单清除无效。 -->
                  <input type="reset" value="重置"/>
                  <!-- 文件上传 -->
                   <br/>
                   文件上传：<input type="file" /><br/>
                   <!-- 多行文本框 -->
                    <textarea rows="5" cols="30" value="多行文本框">默认显示文本</textarea><br/>
                    个人简介：<br/>
                    <textarea rows="5" cols="30" name="intro">请输入个人简介</textarea><br/>
                    <!-- 隐藏域 -->
                     <!-- 隐藏域是指在表单中，用户不可见，但又需要提交给服务器的数据。 -->
                    <input type="hidden" name="hidden" value="隐藏数据"><br/>
                </form>
                    <!-- 下拉列表：显示多项 -->
                <form method="post">
                        <select multiple>
                            <option value="苹果">苹果</option>
                            <option value="香蕉">香蕉</option>
                            <option value="橘子">橘子</option>
                            <option value="葡萄">葡萄</option>
                            <option value="柚子">柚子</option>
                            
                        </select>
                        <!-- 将size取值为1、2、3时，会发现在Chrome浏览器中无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。 -->
                         <select multiple size="2">
                            <option value="苹果" selected>苹果</option>
                            <option value="香蕉">香蕉</option>
                            <option value="橘子">橘子</option>
                            <option value="葡萄">葡萄</option>
                            <option value="柚子">柚子</option>
                         </select>
                         <!-- selected属性表示列表项是否被选中 -->
                </form>
       
    </body>
</html>

效果图：