一、表单组成部分

一个表单有三个基本组成部分:

  1. 表单标签:这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
  2. 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  3. 表单按钮:包括提交按钮、复位按钮和一般按钮

二、表单语法

<form  method="post" action="result.html">
   <p>  用户名:<input type="text" name="username"  placeholder="请输入您的用户名">  </p>
   <p>  密 码:<input type="password" name="pass" placeholder="请输入您的密码">  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重置"/> 
   </p>
</form>

 效果:

html5 提交表单方法 JS html表单提交按钮_html

三、元素详解

1. <form>标签是用来表示采集数据的范围

<form action="" method=""></form>

属性:

  1. action  采集的数据提交的路径
  2. method  采集的数据提交的方式(get/post 不标注默认为get)

        (1) get   保密信息不推荐使用,提交可以在上方地址栏看到相关信息。

        (2) post  在实际网页开发中通常采用post方式提交表单数据。

2. 表单的属性

语法:

<input type="text" name="username" placeholder="请输入您的用户名" value="" maxlength="10">属性说明type指定元素的类型name 指定表单元素的名字(输上后会有文本自动补全功能,有历史记录提示。)value输入的元素初始值(input内部的初始值,可以选择不写) 注:type类型为按钮时 value必须写上去 例:value=“登录”placeholder占位符 输入框的提醒文本maxlength

type为text 或 password 时,输入的最大字符数

3.type类型

 两个输入框

  • type="text"  文本框,输出框,例如用户名、验证码的框

用户名:<input type="text" name="username" placeholder="请输入您的用户名">

  •     type="password"  密码框

密码:<input type="password" name="pass" placeholder="请输入您的密码">


四个按钮

  •     type="submit"     提交按钮 <input type="submit">

<input type="submit" name="Button" value="提交"/>

  •     type="reset"     重置按钮

<input type="reset" name="Reset" value="重置"/>

  •     type="button"   普通按钮,可以自己设定按钮功能

<input type="button" name="Reset" value="按钮"/>

  •     type="image" 图片提交按钮   和提交类似

<input type="image" src="图片路径" alt="加载失败,请重新尝试" >


 两个选框

  • type="radio" 单选框 多选一,name值要保持一致

性别:<input type="radio" name="sex" id="male"/> 男 <input type="radio" name="sex" id="male"/> 女

  • type="checkbox" 多选框,可以选择多个值

兴趣爱好: <label> <!--label可以选择不写,无具体含义,意为标签--> <input type="checkbox" name="hobby" checked="checked"/> 编程 <!--checked="checked"表示默认选中该项--> <input type="checkbox" name="hobby"/> 跳舞 <input type="checkbox" name="hobby"/> 跑步 <input type="checkbox" name="hobby"/> 围棋 </label>


 文件输入框

  • type="file" 文件输入框,可以上传文件

<input type="file" name="myfile" multiple="multiple" /> <!--multiple="multiple"表示可以同时上传多个文件,不加默认上传1个-->


按钮

  • 在type中定义按钮类型,赋予按钮各种功能,不赋值则默认为普通按钮

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


4.文本域

多行文本框也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。

代码格式:<textarea name="..." cols="..." rows="..." ></textarea>

cols列来定义宽  rows行来定义高 定义文本框大小,初始值,可以不写,页面中可以修改,用样式修改。不想在页面中被修改加style=''resize:none;"

<textarea cols="30" rows="10" style="resize: none; " placeholder="提醒文本"></textarea>


5.下拉选择框

 <select>
    <option>选项1</option>
    <option selected>选项2</option>
    ....
  </select>

选项默认被选中,给option增加selected或selected="selected"

<select> <option value="boshi">博士</option> <option value="shuoshi">硕士</option> <option selected="selected" value="benke">本科</option> <!--下拉选择框的选项默认为本科,可在页面上自行修改--> <!-- value要么不写,要不就赋上值,否则提交不上,赋值之后提交的是value值 --> </select> <!--<select multiple="multiple">可以同时提交多个选项,用的比较少-->


6.隐藏域(不太重要)

        隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
 

<input type="hidden" name="..." value="...">


具体效果截图可以看下篇文章