欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

4. HTML表单标签

程序员文章站 2022-10-03 21:37:45
表单是网页中最常见的元素，也是用户和我们交互的重要手段，在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签，即输入框、下拉框、按钮、文本域，如下是一个最常见的表单结构内容： 1

表单是网页中最常见的元素，也是用户和我们交互的重要手段，在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签，即输入框、下拉框、按钮、文本域，如下是一个最常见的表单结构内容：

4. HTML表单标签
 1 <form method="" action="" enctype="multipart/form-data(提交表单中有文件设置)">
 2     <!-- 输入框-文本框 -->
 3     <input type="text" name="文本框名称"/>
 4     <!-- 输入框-密码框 -->
 5     <input type="password" name="密码框名称"/>
 6     <!-- 输入框-单选按钮（通常是一对） -->
 7     <input type="radio" name="单选按钮名称" value="单选按钮值"/>描述文本（页面显示内容）
 8     <!-- 输入框-复选框（通常是 name属性相同的一组） -->
 9     <input type="checkbox" name="复选框名称" value="复选框值"/>描述文本（页面显示内容）
10     <!-- 输入框-文件域（注意此时必须设置表单的 enctype 属性） -->
11     <input type="file" name="文本框名称"/>
12     <!-- 下拉列表 -->
13     <select name="下列框名称">
14         <option value="下拉列表选项值（通常是一组）">下拉列表选项（页面显示内容）  </option>
15     </select>
16     <!-- 按钮-普通 -->
17     <input type="button" name="按钮名称" value="按钮页面显示文字">
18     <!-- 按钮-提交 -->
19     <input type="submit" name="按钮名称" value="按钮页面显示文字">
20     <!-- 按钮-重置 -->
21     <input type="reset" name="按钮名" value="按钮页面显示文字">
22 </form>
View Code

表单结构

1 <form action="" method="POST" enctype="multipart/form-data">
2     用户名：<input type="text" name="username"/>
3 
4     <input type="submit" name="提交按钮"/>
5 </form>

如上是一个最简单的表单结果，在表单结构中需要我们掌握的内容除了表单相关的标签外，就是表单的属性。action 属性，指向服务器处理表单的程序地址，而method属性指定浏览器处理表单的方式，常用的方法包括GET、POST，如下是我们总结的一些关于这两种方式的区别：

GET，这种方法在表单提交的时候比较快，但是表单中的数据会显示在浏览器的地址栏中，所以这种方式不太安全。

POST，这种方法在提交表单的时候会对表单内容进行封装，不会显示在地址栏中，所以这种方式比较安全，不过在速度上不如GET方式。

输入框

<p>
    用户名：<input type="text" name="username"/>
</p>
<p>
    密 码：<input type="password" name="password"/>
</p>
<p>
    性 别：
    <input type="radio" name="sex"/>男
    <input type="radio" name="sex"/>女
</p>
<p>
    爱 好：
    <input type="checkbox" name="hobbies"/>读书
    <input type="checkbox" name="hobbies"/>打游戏
    <input type="checkbox" name="hobbies"/>旅游
    <input type="checkbox" name="hobbies"/>爬山
</p>
<p>
    上传文件： <input type="file" name="uploadfile"/>
</p>
<p>
    隐藏域： <input type="hidden" name="userid" value="0000011101010"/>
</p>

如上就是表单的中输入框内容，输入框依赖的是<input>标签，不同的输入框实现是通过它的type属性实现的，关于type属性的值包括可用的选项包括 text（普通文本输入）、password（密码框） 、checkbox（复选框）、radio（单选按钮）、submit（提交按钮）、reset（重置按钮）、file(文件域)、hidden（隐藏域），默认为 text。

按钮

<p>
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
</p>
<p>
        <input type="button" value="普通按钮"/>
    <input type="submit" value="提交按钮"/>
    <input type="reset" value="重置按钮"/>            
</p>

如上就是表单中实现按钮的方式，可以通过<button>标签，也可以通过<input>标签，不论使用哪种方式，我们都会发现这些按钮都可以分为三类，即普通按钮、提交按钮、重置按钮，指定按钮形式都是依赖type属性指定的。在这里需要注意的是<button>按钮指定描述文本是在标签中的描述文本，而<input>标签指定按钮的描述文本是通过value属性。

下拉框

<p>
    省：
    <select name="province">
        <option selected>--- 请选择 ---</option>
        <option value="0001">河北省</option>
        <option  value="0002">山西省</option>
        <option  value="0003">陕西省</option>
    </select>
</p>

下拉框可以方便用户输入，具体的内容如上所示。

文本域

<textarea name="content" cols="80" rows="10">
    测试
</textarea>

文本域可以让我们输入大段的文字，需要注意的是文本域和输入框不同的地方是，文本域的默认值是标签中的文本，输入框是通过value属性指定的。

4. HTML表单标签

上一篇： 浅谈宋代的“地摊经济”，一般都卖些什么？

下一篇： ai怎么绘制浆果类水果图片?

推荐阅读