HTML form表单问题

作者: 饥人谷_Coziz | 来源:发表于2017-09-24 22:33 被阅读0次

HTML表单的用法
02_html&css
2019-10-24 表单标签
HTML表单用法
HTML form表单问题
关于HTML表单见解
_姜3
HTML表单用法
FORM 表单
08-表单

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

<form> 标签用于为用户输入创建 HTML 表单，表单能够包含文本字段、复选框、单选框、提交按钮等等，表单用于向服务器传输数据。
type=text
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等，是Input的默认类型。
type=password
密码输入框，当在此输入框输入信息时显示为保密字符。
type=file
提供了一个文件目录输入的平台。
type=hidden
隐藏域，如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
type=button
按钮，要让按钮跳转到某个页面上还需要加入写JavaScript代码。
type=checkbox
多选框，常见于注册时选择爱好、性格、等信息。
type=radio
单选框，出现在多选一的页面设定中。
type=image
将图片作为提交按钮。
type=submit
提交按钮，将Form中所有内容进行提交action页处理。
type=reset
充值按钮，清空表单所有填写内容。

post 和 get 方式的区别？

get安全性非常低，post安全性较高。
get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP的post机制，将表单内各个字段与其内容放置在HTML的header内一起传送到action属性所指的URL地址。用户看不到这个过程。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

在input里，name 有什么作用？

name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

radio 如何分组?

在input中设置name属性，name相同的位同一个组。

placeholder 属性有什么作用?

提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

type=hidden隐藏域有什么作用? 举例说明

在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。隐藏域在页面中对于用户是不可见的，但当用户提交信息的时候，隐藏域的信息也被一起发送到服务器。例如：在提交表单信息时，隐藏域的数据可以验证用户身份，若隐藏域信息与后台数据一致，则通过身份验证。

HTML 表单的用法

表单的定义

表单是一个包含表单元素的区域。表单元素允许用户在表单中输入信息的元素。表单使用表单标签(<form>)定义。HTML中的表单是HTML页面与浏览器端实现交互的重要手段。利用表单，服务器可以收集客户端浏览器提交的相关信息，比如输入的密码等等。

form标签属性

属性	值	描述
accept	MIME_type	规定能够通过文件上传进行提交的文件类型，HTML 5 中不支持
accept-charset	charset_list	规定服务器可处理的表单数据字符集
action	URL	规定当提交表单时向何处发送表单数据
autocomplete	on/off	规定表单是否应该启用自动完成功能
enctype	见说明	规定在发送到服务器之前应该如何对表单数据进行编码
method	get/post	规定如何发送表单数据
name	form_name	规定表单的名称。
novalidate	novalidate	规定当提交表单时不对其进行验证
target	_blank/_self/_parent/_top/framename	规定在何处打开

说明

enctype 属性可能的值：

application/x-www-form-urlencoded（在发送前编码所有字符）
multipart/form-data（不对字符编码，在使用包含文件上传控件的表单时，必须使用该值）
text/plain（空格转换为 "+" 加号，但不对特殊字符编码）

常用的表单元素

文本域
<input type="text" name="text" value="" />
密码域
<input type="password" name="text" value="" />
单选按钮

  男人:<input type="radio" name="sex" value="male" /> Male
  <br />
  女人：<input type="radio" name="sex" value="female" /> Female

复选框
<input type="checkbox" name="check1" value="" />
按钮
<input type="button" value="确认" />
重置按钮
当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。
<input type="reset" value="重置" />
提交按钮
当点击提交按钮时，浏览器将自动提交表单。
<input type="submit" value="提交" />
隐藏域
隐藏域在浏览器中并不显示。
<input type="hidden" value="我是一个隐藏域" />
文件上传域
<input type="file" value="" />
图片按钮
<input type="image" src="123.gif" />
下拉列表

<select>
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>

label
label 元素不会向用户呈现任何特殊效果。设置for属性，点击label内的文字也会触发单选按钮。

  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />

文本区域
用户可在此文本区域中写文本。在一个文本区中，可输入无限数量的文本。

<textarea cols="10" rows="10">我是一个文本区域</textarea>

form表单Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
  <form action="">
    <div>
      <label for="userName">姓名：</label>
      <input type="text" id= "userName" name="userName" placeholder= "用户名">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id= "password" name="password">
    </div>
    <div>
      <label>性别：</label>
      <input type="radio" id="male1" name="sex" value="male" checked>
      <label for="male">男</label>
      <input type="radio" id="female1" name="sex" value="female">
      <label for="female">女</label>
    </div>
    <div>
      <label>取向：</label>
      <input type="radio" id="male2" name="orientation" value="male">
      <label for="male">男</label>
      <input type="radio" id="female2" name="orientation" value="female">
      <label for="female">女</label>
    </div>
    <div>
      <label>爱好：</label>
      <input type="checkbox" id="game" name="hobby">
      <label for="game">游戏</label>
      <input type="checkbox" id="tourism" name="hobby">
      <label for="tourism">旅游</label>
      <input type="checkbox" id="movies" name="hobby">
      <label for="movies">电源</label>
    </div>
    <div>
      <label>评论：</label>
      <textarea  name="comment" cols="30" rows="15" placeholder= "请输入"></textarea>
    </div>
    <div>
      <label>我的Car：</label>
      <select name="myCar" id="myCar">
        <option value="奔驰">奔驰</option>
        <option value="宝马">宝马</option>
        <option value="奥迪">奥迪</option>
      </select>
      <input type="submit">
    </div>
  </form>
</body>
</html>

效果预览

网友评论

本文标题：HTML form表单问题

本文链接：https://www.haomeiwen.com/subject/rnclextx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！