【HTML】3.Form表单

最新推荐文章于 2022-08-13 12:14:28 发布
最新推荐文章于 2022-08-13 12:14:28 发布
阅读量4.5k 收藏 1
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsl211511/article/details/51355699
版权

标签

表单元素

标签

描述

文本框

<INPUT TYPE=‘text’ …>

输入一行文本

密码

<INPUT TYPE=‘password’ …>

输入一行文本，但不可见，只以星号显示

单元按钮

<INPUT TYPE=‘radio’ …>

只能选择一个选项

复选框

<INPUT TYPE=‘checkbox’ …>

可以选择一个或多个选项

隐藏域

<INPUT TYPE=‘hidden’ …>

该域的值对用户不可见，但会提交给服务器

下拉列表

<SELECT …>

    <OPTION …> … </OPTION>  (可以放多个option)

</SELECT>

文本域

<TEXTAREA …>…</TEXTAREA>

可以输入多行文本

提交按钮

<INPUT TYPE=‘submit’>

提交表单

普通按钮

<INPUT TYPE=‘button’>

 

重置按钮

<INPUT TYPE=‘reset’>

重置表单信息

介绍

基本功能：收集用户填写的数据，然后提交到服务器上。

要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。

 文本框：

<inputtype="text" name="uname" value="333" size="30" maxlength="10" />

密码框：（跟文本框的用法基本一致，除了页面上以星号显示）

<inputtype="password" name="pwd" />

单选按钮(用于多选一的情况)：

性别：

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

<inputtype="radio" name="gender" value="0" />女
1.单选按钮是分组的， name相同即为一组。  一组只能选中一个按钮。

2.value：如果不增加value属性，选中该按钮提交时默认为：on，而不是空字符串。所以，建议大家使用单选按钮一定要指定value.

复选框(用于多选多的情况)：

喜欢编程语言：

<br />

      <inputtype="checkbox" name="favorite"/>  JAVA

      <inputtype="checkbox" name="favorite"value="2"/>  C++

      <inputtype="checkbox" name="favorite"value="3"/>  RUBY

      <inputtype="checkbox" name="favorite"value="4"/>  C
3.复选框是分组的， name相同即为一组。 可同时多个复选框

4.value：如果不增加value属性，选中该按钮提交时默认为：on，而不是空字符串。

5.选中的选项会被传递成多个同名不同值的参数。

下拉列表（实现多选一 或多选多的效果。）：

国籍：

<br />

      <selectname="country" multiple>

               <option>China</option>

               <optionvalue="2">America</option>

               <optionvalue="3">France</option>                  

      </select>
1.当<option>没有指定value属性。如果被选中，则提交<option>中的提示文本，而不是On或空字符串。

注：单选按钮、复选框默认选中用：checked属性。  下拉列表使用：selected属性。

隐藏域： 
<input type="hidden" name="hid"value="55"/> <br />    

多行文本域：

<textareaname="introduce" rows="4" cols="40">  </textarea>

重置按钮：将各表单域的值恢复为默认值。

提交按钮：提交表单数据。

图片按钮：提交表单数据，通过单击指定的图片提交表单。例如：

<inputtype=image   src=”1.jpg” />

form表单：

form: 表单域，用来收集用户信息。

action:表单数据提交给谁

method：提交方式

file:///D:/总结/HTML--20160410/HTML-form-01.html?uname=akali&pwd=123123

get方法：拼接在URL后面，数据可见，并且不安全，数据量小。

特点：使用问号拼接在URL后面，键值对的形式，键值对使用&隔开。

Post方法：安全，信息量大。

依靠name属性来决定数据是否提交。

1、 使用radio属性时，要注意 组的概念，组是由name属性来控制

       同一name同一组并且一组只能选择一个

2、 使用radio属性时，要注意value的值，要求同一组value的值不同

       一般建议使用阿拉伯数字。

Demo 
<html>

       <head>

              <title>form表单标签</title>

              <meta charset="utf-8"/>

       </head>

       <body>

              <form action="#"method="get">

                     <tableborder="2px" width="600px"height="100px">

                            <tr>

                                   <th>用户名</th>

                                   <td>

                                          <inputtype="text" name="uname" value="akali"  />

                                   </td>

                            </tr>

                            <tr>

                                   <th>密码</th>

                                   <td>

                                          <inputtype="password" name="pwd" />

                                   </td>

                            </tr>

                            <tr>

                                   <th>确认密码</th>

                                   <td>

                                           <input type="password"name="confpwd" value="" />

                                   </td>

                            </tr>

                            <tr>

                                   <th>手机号码</th>

                                   <td>

                                          <inputtype="text" name="phoneNum" value=""   />

                                   </td>

                            </tr>

                           

                            <tr>

                                   <th>性别</th>

            <td>

                  <inputtype="radio" name="sex" value="1"checked="checked"/>男

                  <inputtype="radio" name="sex" value="2" />女

            </td>

                            </tr>

                      <tr>

                          <th>是否有车</th>

                             <td>

                               <inputtype="radio" name="car" value="1" />有

                               <inputtype="radio" name="car" value="2" />否

                            </td>

                            </tr>

                            <tr>

                                   <th>爱好</th>

            <td>

                <inputtype="checkbox" name="fav" value="1" />唱歌

                <inputtype="checkbox" name="fav" value="2" />跳舞

                <inputtype="checkbox" name="fav" value="3" />跑步

                <inputtype="checkbox" name="fav" value="4" />旅游

                <inputtype="checkbox" name="fav" value="5" />睡觉

                                         

           </td>

                            </tr>

                            <tr>

                                   <th>籍贯</th>

                            <td>

                  <selectname="adress">

                        <optionvalue="1">--请选择--</option>

                        <optionvalue="2" selected="selected">北京</option>

                        <optionvalue="3">大连</option>

                        <optionvalue="4">郑州</option>

                 </select>

                             </td>

                            </tr>

                            <tr>

                                   <th>语言</th>

                   <td>

                       <selectname="language" multiple="multiple">

                            <optionvalue="1">--请选择--</option>

                            <optionvalue="2">JAVA</option>

                            <optionvalue="3">C</option>

                            <optionvalue="4">C++</option>

                                          </select>

                 </td>

                            </tr>

                            <tr>

                                   <th>自我介绍</th>

            <td>

              <textareaname="texta" rows="10" cols="30">这里需要写你的个人介绍</textarea>
           
 </td>
                            </tr>

                            <tr>

                                   <tdcolspan="2" align="center">

                                      <inputtype="checkbox" name="agree" value="1" />是否同意本公司的协议

                                   </td>

                            </tr>

                            <tr>

                                   <tdcolspan="2" align="center">

                                          <inputtype="submit" value="提交注册" />

                                          <inputtype="reset" value="重置" />

                                   </td>

                            </tr>

                            <tr>

                                   <th>普通按钮</th>

                                   <td>

                                          <inputtype="button" name="" value="普通按钮"  />

                                   </td>
                            </tr>
                     </table>
              </form>
       </body>
</html>

业务思想

Form表单是学习HTML中很重要的一项，尤其对于前台和后台交互的设计人员来讲，更是要很熟悉表单的使用和设计。

总体来讲，form表单挺简单的，但是要细心每一步的设计、每一个操作。多去练习使用，受用无穷。


吴士龙
关注
专栏目录
必填项的标签, 显示一个红色的星号"*"
Keep Fighting
03-07 5万+
想必每个数据对象都会有些必填项, 因此做了一个标签提示哪个是必填项.这个也是重写UI的, 不过和M2那个Label一样, 因为Label是透明的, 应该可以应用于各种L&F. import java.awt.Color;import java.awt.Graphics;import javax.swing.JComponent;import javax.swing.JLabel;i
HTML中form表单作用解释
热门推荐
听风的雨滴
12-18 1万+
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
第三章：form表单
wcy_0522的博客
08-13 389
第三章：form表单
html中加个星号,使用CSS 给表单必选项添加星号的实现方法
weixin_29669899的博客
06-02 2093
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单：姓名 *示例：*姓名然后给星号添加一点 CSS 样式：.form-group span.required {color: #999;font-size: 150%;}例如：但是有些时候我们可能无法修改 HTML 结构，或者不想添加多余无意义的标签，这时可以利用 CSS 的 after 伪类来制...
html--表单form
weixin_43879167的博客
01-26 538
文章目录一、html架构解读一、常用简单标签二、扩展标签三、a标签 一、html架构解读 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <!DOCTYPE html>代表文档类型，是html5的声明方式。w
html form 表单
且听风吟的博客
07-15 6003
html form 表单
HTML的form表单和django的form表单
09-18
HTML的form表单和Django的form表单是Web开发中的两种重要概念，它们在构建交互式用户界面中起着核心作用。HTML的form表单主要用于收集用户输入的数据，而Django的form表单则是一种更高级的抽象，用于处理这些数据的...
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
jquery.form.js
02-13
2. **文件上传**：传统的HTML表单提交无法处理文件上传，而`jquery.form.js`提供了文件上传的支持，包括单文件和多文件上传。通过`FormData`对象，插件能够处理文件数据并将其发送到服务器。 3. **进度条显示**：...
vue3-form-usage：使用vue3的表单用法
02-07
5. **Form 表单提交**: Vue3提供了一个`v-on`的简写`@`来监听事件，所以你可以像这样处理表单提交： ```html <form @submit.prevent="onSubmit"> <!-- 表单元素 --> </form> ``` `onSubmit`函数在提交时调用，...
Jquery.Form 异步提交表单的简单实例
11-30
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单。一个普通的表单，不需要任何特殊的标记： 代码如下:<form id=”myForm” method=”post” action=”/Home/...
html 表单必填项后的星号,使用CSS给表单必选项添加星号的实现方法
weixin_33292780的博客
06-23 4317
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，下面通过给大家分享使用CSS 给表单必选项添加星号的实现方法，需要的朋友参考下吧在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单：姓名 *示例：* 姓名然后给星号添加一点 CSS 样式：.form-group span.required {color: #999;font-s...
小白必看！前端密码表单输入内容变星号这样做！！！！我引入了 jquery
weixin_43099985的博客
09-07 1万+
在前端项目中经常有这样的需求！就是把密码输入表单内容变为星号！ 有的同学会说简单！type=’password’ 不就得啦！ 但是！当今浏览器解析时大多会把输入的内容变为“·”点，而不是星号！ 这本来无伤大雅！但有的产品经理态度强硬！说“我就要星号！* 行！你说的算 写js呗！我引入了JQ 写起来也很简单！ &amp;lt;input id=&quot;a&quot; type=&quot;text&quot;/&amp;gt; ...
http协议
吴士龙
05-09 4190
学习HTTP协议是进入B/S业务最初的一步，正式开启浏览器工作区的服务模式，作为互联网上应用最为广泛的协议之一，以其简单、应用广泛等特点，使得我们很有必要研究一番。个人总结粗浅入门，若要更为深层次学习，建议找网站或者买书以专攻，欢迎交流学习。
【HTML】1.何识已淡忘
吴士龙
05-09 3958
对于HTML的总结是一个比较痛苦的事情，因为大家都很熟悉HTML的使用，每天都离不开它，要总结出其知识很简单也很难。 写了一些关于HTML的基本常识，算是一个入门阶段的学习和使用，更深层次的总结在以后的时间里，不断加入。
HTML5 + CSS3美化Form表单设计
"这是一个使用HTML5和CSS3设计的美观的Form表单示例代码，旨在展示如何通过样式提升表单的视觉效果和用户体验。" 在这个表单设计中，主要运用了以下HTML5和CSS3的知识点： 1. **HTML5 Form元素**：HTML5中的`<form...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值