表单


表单

组成:由表单域,表单空控件(表单元素),提示信息三大部分组成

1.表单域:是一个包含表单元素的区域

1.用<from>双标签用于定义表单域,以实现用户信息的收集和传递,<from>会把它范围内的表单元素信息提交给服务器
2.表单域常用属性:
action属性 属性值是url地址,用于指定接受并处理表单数据的服务器程序的url地址
method属性 属性值是get/post,用于设置表单数据的提交方式
name属性 属性值是程序员自定义名称,用于指定表单的名称,以区分同一个页面中的多个表单域
3. 以上属性在学习了后端编程时会再了解

<body>
<form action ="url地址" methond="提交方式" name="表单域名称">
      各种表单域控件
</form>
</body>

2.表单空控件(表单元素)

1.在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或选择的内容控件
2.分为input输入表单元素,select下拉表单元素,textarea文本域元素

<input>输入表单元素

<input>是一个单标签,其后的反斜杠在HTML5中可以不写<input type="属性值">
<input>标签用于收集用户信息,此标签中包含一个必需的type属性,用type属性来区分输入字段的很多种形式,可以是文本框,复选框,掩码后的文本控件,单选按钮等等;

<input>的type属性可以取得属性值:
type="text",文本框,用于定义单行输入字段,用户可以在其中输入文本,默认宽度是20个字符
type="password",密码框,用于定义密码字段,该字段中的字符会被掩码,即以小黑点显示
type="radio",单选按钮
type="chekbox",复选框
type="submit",提交按钮,提交按钮会把表单数据发送到服务器

提交按钮上有提交二字,可以利用input 的value属性来取代“提交”,显示其他文本形式

type="reset",重置按钮,重置按钮会清除表单中的用户输入的所有数据,恢复到表单的默认形式

重置按钮上有提交二字,可以利用input 的value属性来取代“重置”,显示其他文本形式

type="buttom",普通按钮,定义可点击按钮,点击会来做另一件事,可以利用input 的value属性来显示点击此处的目的文本
type="file",文件域,按此按钮,会上传文件,就是可以选择电脑文件来上传;
<input>标签的其他属性:
name属性:属性值是自定义的,用于定义input元素的名称,

特别注意:单选按钮中的各个选项必须有相同的name,才可实现单选;
复选框中的各个选项必须有相同的name,才可实现多选

value属性:属性值是自定义的,用于定义input元素的值

value="文本",可以在文本框,有些按钮(上文提到的提交,重置,普通按钮),可以直接显示value 的属性值,即一些文本

checked属性:属性值是checked,即checked=“checked”,主要是针对单选按钮和复选框,它的作用是规定此input元素首次加载时应当被选中,就是当页面打开时,就默认选择的选项,直接写一个checked也可以
<body>
<form action ="url地址" methond="提交方式" name="表单域名称">
<!--单选按钮-->
       男<input type="radio" name="sex" value="男" checked>
       女<input type="radio" name="sex" value="女" />
       <br>
<--!多选框-->
       睡觉<input type="checkbox" name="hobby" checked>
       吃饭<input type="checkbox" name="hobby">
       玩<input type="checkbox" name="hobby" />
       
</form>
</body>
maxlength属性:属性值是正整数,规定输入字段的字符的最大长度

注意:name和value是每个表单元素都有的属性,主要是给后台开发人员看的
name属性:当前input 表单的名字,后台可以通过这个name属性找到这个表单
主要用来区分不同的表单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
此处的action ="biao.html",是此html文件同级目录下的html文件
<body>
<form action ="biao.html" method="post" name="lianxi">
<!--text文本框 用户可以输入文字,其中value值的文本会显示出来-->
用户名:<input type="text" name="username" value="请输入用户名" maxlength="16"> <br>
<!--password 密码框-->
密码:<input type="password" name="pwd"> <br>
<!--radio单选按钮,实现多选一-->
       男<input type="radio" name="sex" checked>
       女<input type="radio" name="sex" />
       <br>
<!--checkbox多选框-->
       睡觉<input type="checkbox" name="hobby" checked>
       吃饭<input type="checkbox" name="hobby">
       玩<input type="checkbox" name="hobby" />
       <br>
<!--submit提交按钮,按钮上显示value的属性值-->
      <input type="submit" value="免费注册"> <br>
<!--reset重置按钮,按钮上显示value的属性值-->
      <input type="reset" value="重新填写"> <br>
 <!--button普通按钮,按钮上显示value的属性值-->
 <input type="button" value="获取短信验证码"> <br>
 <!--file文件域,上传文件使用-->
 上传头像:<input type="file">
</form>
</body>
</html>

<label>标签,经常与input元素搭配使用

  1. 像“用户名”后跟一个文本框,我们要在文本框中输入内容时,需要先点击一下文本框,才可以往里面输入内容,若鼠标点击“用户名”时就可以输入内容;
    或者像各种按钮,有时按钮过小,不易点击,当我们点击按钮旁的文字时就可以选中,使用<label>双标签就可以实现,提高用户体验
  2. 需要两步:
    <label>开始标签里添加for="自定义标记"<label>内容<label>
    在相应的标签中添加id="自定义标记"
<!--text文本框 用户可以输入文字,其中value值的文本会显示出来-->
<label for="biao">用户名:</label><input type="text" id="biao" name="username" value="请输入用户名" maxlength="16">

3.select下拉表单元素 ,嵌套在表单<form>

  1. 在页面中,如果有多个选项让用户选择,并且想节约页面空间时,可以使用<select>双标签定义下拉列表
  2. 语法:
    籍贯:
<select>
<option>山东</option>
<option selected="selected">北京</option>
<option>上海</option>
</select>
  1. <select>中至少包含一对<option>
  2. <option>中定义selected="selected"时,当前项就是默认选中

4.textarea文本域表单元素:嵌套在表单<form>

  1. 文本框只能单行写,而文本域可以写好几行,所以当用户输入的内容较多的情况下,就不使用文本框表单<input type="text">了,使用<textarea>双标签来定义多行文本输入的控件,常用于留言板,评论等
    2. <textarea>文本<textarea>,其中的文本可以在文本域中直接显示出来
<textarea>
请开始你的自我介绍:
</textarea>
  1. 文本域的大小会在css中学习


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM