第二章 表单元素

第二章 表单元素

学习目标：

掌握form表单的应用场景

掌握常用表单元素

掌握语义化表单

目录

第二章 表单元素

2.1初识表单

2.2表单的基本语法

2.3input元素

2.4文本框，密码框，按钮

2.1初识表单

动态网页：用户和服务器之间交互，

数据采集，比如注册，填写信息，服务器连接到数据库增删改查

表单是实现用户与网页之间信息交互的基础

就是一个将用户信息组织起来的容器

2.2表单的基本语法

action：表单提交地址点击提交按钮之后，

表单中的数据提交到动态的页面（JSP（JAVA sever page）java程序，php,asp,aspx）

action=默认情况下，是提交给自己

method：提交方式：

get-以明文的方式提交,uil路径会有用户账号密码显示；post-以密文的方式提交

http://localhost:8080/admin/Login.html?

txtLoginName=abc&txtLoginPwd=123

书写示例：

<form action="doLogin.jsp" method="get">//doLogin是动态提交

    <p>登录名：<input type="text" name="txtLoginName"/> </p>

    <p>密码  <input type="password" name="txtLoginPwd"/> </p>

//txtLoginPwd相当于是参数类型，123是参数值

    <p>

        <input type="submit" value="登录"/>

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

    </p>

</form>

2.3input元素 

 

<form action="" method="get">

  <input type="text" name="txtLoginName" value="默认值"//name用于服务器端获取数据

         placeholder="输入提示文字" size="8" maxlength="15" readonly="readonly"//只读

       //size表示文本框长度，maxlength表示最大输入字符长度，以字符长度为单位，不是以像素为单位/>

</form>

2.4文本框，密码框，按钮

<!--HTML4的按钮-->

  <input type="password" name="txtPassWord" placeholder="请输入密码"/>

  <input type="button" value="普通按钮，默认情况下没有反应" οnclick="alert('点击了普通按钮')"/> //onclick最好在css里面写

  <input type="submit" value="提交按钮，点击后触发表单提交动作"/><br/>

  <input type="reset" value="重置按钮，点击后会重置表单中所有元素的初始值"/><br/>

  <input type="image" src="images/iu.jpg" value="带图片的按钮，点击后，动作等同于提交按钮"/>

  <!--按钮标签

  标签中的值：文字，图像，水平线，框架，分组框，音频，视频

  -->

  <button>按钮文本必须书写在标签内部</button><br/>

  <button>button标签中的文本可以<strong>嵌套</strong>其他行级元素</button><br/>

  <button>测试<span style="color:red;font-weight: bold;">嵌套</span>

    <img src="images/iu.jpg" width="50" align="center"/>

  </button>

<!--

  单选按钮中，记得把name属性设置成一样

  注意：radio控件中的value并不是给用户看的，而是用来提交给服务器的值

  -->

  性别：男(用户看到的)<input type="radio" value="男（向服务器提交的值）" name="sex">  

         女<input type="radio" value="女"checked="checked" name="sex"/>  

         保密<input type="radio" value="保密" name="sex"/><br/>

复选框：checkbox

爱好：<input type="checkbox" value="吃饭" name="fav" checked="checked"/>吃饭  

        <input type="checkbox" value="睡觉" name="fav"/>睡觉  

        <input type="checkbox" value="打豆豆" name="fav"/>打豆豆<br/>

</form>

<hr/>

<h1>文件域</h1>

<!--

  enctype:规定发送到服务器之前如果对表单数据进行编码

  application/x-www-form-urlencoded :发送到服务器之前，所有的字符都会进行编码，

  空格会转换成+号，特殊符号会转换成ASCALL码的16进制

  multipart/form-data:发送前，不对字符进行编码，在使用包含文件，上传控件表单时，必须使用这个值

  text/plain:空格转换为+号，但是不对特殊字符进行编码

  -->

<form action="" method="post" enctype="multipart/form-data">

  请选择上传文件：<input type="file" name="file">

  上传文件时，method设置为post

</form>

小结：