form表单常用属性

最新推荐文章于 2024-02-16 18:32:49 发布
最新推荐文章于 2024-02-16 18:32:49 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 前端 文章标签： html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42193335/article/details/118074026
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>

<!--需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。-->

<!--
   form标签就是表单
       input type=text     是文件输入框  value设置默认显示内容
       input type=password 是密码输入框  value设置默认显示内容
       input type=radio    是单选框    name属性可以对其进行分组   checked="checked"表示默认选中
       input type=checkbox 是复选框   checked="checked"表示默认选中
       input type=reset    是重置按钮      value属性修改按钮上的文本
       input type=submit   是提交按钮      value属性修改按钮上的文本
       input type=button   是按钮          value属性修改按钮上的文本
       input type=file     是文件上传域
       input type=hidden   是隐藏域    当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

       select 标签是下拉列表框
       option 标签是下拉列表框中的选项 selected="selected"设置默认选中

       textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
           rows 属性设置可以显示几行的高度
           cols 属性设置每行可以显示几个字符宽度
-->
<!--
        form标签是表单标签
            action属性设置提交的服务器地址
            method属性设置提交的方式GET(默认值)或POST

        表单提交的时候，数据没有发送给服务器的三种情况：
            1、表单项没有name属性值
            2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
            3、表单项不在提交的form标签中

        GET请求的特点是：
            1、浏览器地址栏中的地址是：action属性[+?+请求参数]
                请求参数的格式是：name=value&name=value
            2、不安全
            3、它有数据长度的限制

        POST请求的特点是：
            1、浏览器地址栏中只有action属性值
            2、相对于GET请求要安全
            3、理论上没有数据长度的限制
    -->
     <form action="http://localhost:8080" method="get">
         <table>
             <tr>
                 <td>用户名：</td>
                 <td><input type="text" value="user" name="name"><br/></td>
             </tr>
             <tr>
                 <td>密码：</td>
                 <td><input type="password" value="abc" name="password"><br/></td>
             </tr>
             <tr>
                 <td>性别：</td>
                 <td><input type="radio" name="sex" value="男" checked="checked"/>男
                     <input type="radio" name="sex" value="女"/>女
                 </td>

             </tr>
             <tr>
                 <td>兴趣爱好：</td>
                 <td><input type="checkbox" checked="checked" name="java"/>java
                     <input type="checkbox" name="python"/>python
                     <input type="checkbox" name="cpp"/>c++</td>
             </tr>
             <tr>
                 <td>国籍：</td>
                 <td>
                     <select>
                         <option>选择国籍</option>
                         <option selected="selected" name="China">中国</option>
                         <option name="USA">美国</option>
                         <option name="jp">小日本</option>
                     </select>
                 </td>
             </tr>
             <tr>
                 <td>介绍：</td>
                 <td><textarea cols="30" rows="20" name="introduce">我才是默认值</textarea><br/></td>
             </tr>
             <tr>
                 <td>
                     <input type="reset"/>
                     <input type="submit" value="提交"/>
                 </td>
             </tr>

         </table>

     </form>
</body>
</html>
落叶飘淋雨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单补充属性
jiayuannan的博客
05-15 367
之前学习了表单的基础属性，可以制作基础的表单样式，但还有一些表单的样式复杂，需要我们继续学习，接下来一起来学习一下表单的补充属性吧
form属性详解
m0_46355331的博客
08-09 2352
本文记录form的相关属性
form表单 input输入框及属性
S_1978P1
08-02 3181
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!--form表单 input输入框
05_HTML_表单标签(form标签)_form标签中常用的标签元素
qq_45657848的博客
01-11 896
HTML_表单标签(form标签)_form标签中常用的标签元素
【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）
Fighting_hawk的博客
02-10 1万+
1. 掌握form表单的作用：提交数据。 2. 掌握form表单7种常用属性的作用与语法。 3. 掌握form表单9种常用元素的作用与语法。
target属性值
weixin_34301132的博客
12-31 285
有 4 个保留的目标名称用作特殊的文档重定向操作： _blank 浏览器总在一个新打开、未命名的窗体中加载目标文档。 _self 这个目标的值对全部没有指定目标的 &lt;a&gt; 标签是默认目标，它使得目标文档加载并显示在同样的框架或者窗体中作为源文档。这个目标是多余且不必要的。除非和文档标题 &lt;base&gt; 标签中的 target 属性一起使用。...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
CAINIAOQIANDUAN的博客
08-11 2万+
form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值： （单行文本输入框） （密码输入框） （单选框） （多选框） （提交按钮） （重置按钮） 或者按钮（空按钮） （下拉框选） （多行文本框） （1） 是表单的标签，所有的需要写在f...
表单、表格常用属性大全
xu_yuxuyu的博客
11-08 4112
html零基础必看——html入门，编程就是如此简单 第十二章：表单、表格标签一、form表单1.1 form表单标签1.2 input 输入表单控件标签1.2.1 text文本框1.2.2 password密码框1.2.3 radio单选框1.2.4 checkbox多选框1.2.5 普通按钮 提交按钮 重置按钮1.2.6 image 图像提交按钮1.2.7 css3新特性2 `：focus`表单获得焦点时被选中二、select下拉菜单三、textarea 多行输入文本框四、 表格总结 一、form表单
表单标签属性
2202_75549187的博客
12-05 1735
表单标签属性
【HTML基础】form表单属性及常用元素简介
最新发布
萌萌白白的博客
02-16 2502
本文简单介绍了HTML常用的表单元素form，以及使用form时常用的属性等
整理HTML5中表单的常用属性及新属性
11-30
HTML5 新的表单属性HTML5 的 <form> 和 <input>标签添加了几个新属性.<form>新属性：autocompletenovalidate<input>新属性：autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheight and widthlistmin and maxmultiplepattern (regexp)placeholderrequiredstep <form> / <input> autocomplete 属性autocomplete 属性规定 f
JS实现Form表单渲染
黑胡子大叔的博客
02-24 1017
JS实现Form表单渲染 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> </head> <body> <form id="formDialog" class="uk-
附录3-form标签常用属性
potato123232的博客
11-04 1114
post相对于get请求要更安全些，比如写用户名，密码这种东西一般就用post，用户名与密码的内容不会在地址栏显示。method是请求方式，基本上不是get就是post，默认是get，我们也看到了，刚才上面的传参是使用查询字符串的方式，在地址的后面直接加上传递的内容。target是你要在哪里打开action的url地址，默认的值是_self。如果form表单未指定action值，action的默认值为当前页面的URL地址。如果你指定了action，那么提交后，网页会带着参数跳转到指定的action地址。
html---学习之路（form表单的基本属性）
小牛叹气生活不易的博客
06-16 620
form表单的基本属性
FORM表单的几大属性
static_coder的博客
12-28 1万+
FORM表单的几大属性问题引入 在做一个活动支付项目的时候，提交订单（form表单）跳转支付页面发现没有反应。经过断点排查发现断点也进了，不报错。但是返回的就是空白页，让人很纠结。 进过反复测试，才发现是杀毒软件拦截了form表单的请求。如何来解决这个问题呢？下来我们来看看Form表单的属性就会明白了。 FORM的属性 method属性：规定用于发送 form-data 的 HTTP
form表单的属性
qq_44543292的博客
04-08 3931
作者：赖信武 撰写时间：2019.4.5 form表单的属性：action与method. action.值为URL. 该属性规定当提交表单时向何处发送表单数据 实例： 下面的表单拥有两个输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 “form_action.asp” 的页面： URL可能的值： 绝对 URL - 指向其他站点（比如 src=“www.baidu.com”） ...
html表单属性设置默认值,HTML5表单Form之属性
weixin_39917211的博客
06-04 2410
HTML5 Web表单引入了新的表单元素、输入类型、属性和其他功能。有些功能已经使用了多年：表单验证、组合框和占位符文本等。之前我们必须求助于JavaScript创建这些功能，现在可以在浏览器中直接使用它们；您需要做的就是在标记中将属性设置为可用。HTML5不仅使开发人员更容易制作表单，同时也为用户带来了许多方便。由浏览器处理客户端的验证，这样使不同的网站具有了更大的一致性，许多网页无需加载多余的...
Ant Design Pro，用setFieldsValue方法，给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值
热门推荐
永不消失的彩虹的博客
09-20 3万+
其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。 但是关键点在于，引用moment方法转换日期格式 1、setState方法，利用FormItem组件的initialValue属性设置默认值： import moment from 'moment'; this.setState({defaultDate}) // 自定义默认日期...
form表单中几种属性
weixin_44001985的博客
05-02 9134
表单的主要功能是收集信息，一般分两部分：1.体现表单元素的HTML代码；2.客户端脚本 ，或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址，如Servlet,Struts 等；也可以是提交到另一个页面的地址，如HTML，jsp等。 method是将表单的数据从浏览器传送到服务器的方法。即开始时浏...
form表单中常用的属性
05-30
常用的form表单属性包括： 1. action: 提交表单时请求的URL地址。 2. method: 提交表单时使用的HTTP方法，一般为GET或POST。 3. name: 表单的名称，用于区分多个表单。 4. target: 提交表单后打开响应的页面的方式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值