草庐IT

HTML表单

wyh518 2023-03-28 原文

1、表单语法

method: 规定如何发送表单数据常用值:get post
在实际网页开发中通常采用post方式提交表单数据
action: 表示向何处发送表单数据
<form method="post" action="result.html">
    <p>名字:<input name="name" type="text" > </p>
    <p>密码:<input name="pass" type="password" > </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

2、13个表单元素

1、文本框

<!--type="text"
name:文本框名称(必填)
value:文本框初始值
size:文本框长度
maxlength:文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

2、密码框

向密码框中输入字符时,显示的效果,密码字符以黑色实心的圆点来显示。

<!--type="password"
name:密码框名称(必填)
size:密码框长度
-->
<input type="password" name="pass" size="20"/>

3、单选按钮

同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥

<!--type="radio"
name:单选框名称(必填),一组的名称需要相同
checked:单选按钮选中状态
value:单选框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

4、复选框

同一组复选框,根据需要可设置name属性值相同

<!--type="checkbox"
name:复选框名称(必填),一组的名称需要相同
checked:复选按钮选中状态
value:复选框的值
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

 5、下拉列表框

希望在页面加载时有默认选中的选中项,则必须使用selected属性,如果没有默认选中项则第一个选项 默认被选中

<!--select:下拉列表框-->
<!--option:选项-->
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>

6、按钮

<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />

7、多行文本域

textarea:多行文本域
cols:显示的列数
rows:显示的行数
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>

8、文件域

在表单中使用文件域时,必须设置表单的“enctype”编码属性为“multipart/form-data”,表示将表单数据 分为多部分提交。

enctype:表单编码属性
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>

9、邮箱

会自动验证Email地址格式是否正确

邮箱:<input type="email" name="email"/>

10、网址

会自动验证Email地址格式是否正确

请输入你的网址:<input type="url" name="userUrl"/>

11、数字

min:最小值
max:最大值
step:步长
请输入数字:<input type="number" name="num" min="0" max="100" step="10"/>

12、滑块

type值为range即为滑块。

请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/>

13、搜索框

type值为search即为搜索框。

请输入搜索的关键词:<input type="search" name="sousuo"/>

3、表单的高级应用

在某些注册页面或本图片中订单信息页面,必须同意一些条款按钮才能使用等等

  • 隐藏域

     在浏览器中看不到隐藏域,但是在提交表单时可以看到隐藏域的内容被提交至服务器

<input type="hidden" value="666" name="userid">
  • 只读、禁用

     W3C HTML5标准中,规定对于布尔类型的属性,属性值可以省略

只读和禁用不能单写readonly或disabled,必须写readonly=”readonly”和disabled=“disabled”
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
  • 表单元素的标注 

     增强鼠标的可用性

     自动将焦点转移到与该标注相关的表单元素上

<!--它的for属性对应的id与表单元素id一致-->
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

4、表单的初级验证

 

如果用户填写的表单内容不进行验证就发给服务器,那么服务器发现填写的不合法,或是没有填写,就 会返回响应给用户,用户重新填写再提交,如此多次持续直到用户输入正确。它们之间的通信是通过网 络进行的,如果网络很差,那么注册一个账号就得花很长时间,对用户来说是非常烦的,对服务器来说 也增加了其工作压力。

要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。

表单验证的好处:

  1. 减轻服务器的压力。
  2. 保证数据的可行性和安全性。

在客户端就对表单进行验证是非常有必要的

表单初级验证的方法

  • placeholder

     提示语默认显示,当文本框中输入内容时提示语消失

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
  • required

     规定文本框填写内容不能为空,否则不允许用户提交表单

<input type="text" name="username" required/>
  • pattern

     用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

5、小结

 

有关HTML表单的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  5. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. ruby - 如何使用 Nokogiri 解析纯 HTML 表格? - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表,它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  10. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe? - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证&符号不会被转义?由于我无法控制的原因,我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清,我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

随机推荐