HTML表单

Posted 2020-08-08

表单（form）的主要作用在于在网上提供一个图形用户界面，以采集和提交用户输入的数据。

1、表单基本结构，在网页文档中添加一对<form></form>标记对，表单中的输入控件必须包含在form元素的标记对内

<form action="表单处理程序的URL"method="get/post"></form>
标记的action属性定义一个URL，来只是表单中的数据应该被发送到哪里去处理，可使用绝对地址或相对地址
第二个属性method用户控制是如何发送到处理程序的
其中get会显示用户地址，安全性低，运行速度稍快
post有加密的活动，运行速度稍慢，安全性更好

2、输入控件
html支持多种输入控件，包括文本框、单选框、图像等等。用来创建HTML输入控件的元素有三种：

• input：该元素使用type属性定义不同的控件，包括文本、复选框、单选框、提交和重置按钮等
  
• select和option：二者组合使用，创建一个下拉列表
• textarea：穿件一个多行输入的文本框

 

一般情况下被用到的表单标签是输入标签<input>，输入类型是由类型属性(type)定义。常用如下：hidder,text,submit,button,date,datetime,email,number,search,radio,checkbox,color

 

例：<input type=”text”>文本    <input type=”submit”>默认提交

 

input属性  autofocus(自动出现光标)，readonly(只读)，disabled(自带灰色底纹且只读)，placeholder(灰度用户名，光标放上去可以写东西)

 

例：<input type=”date” placeholder=”placeholder”>

单选框

 

※单选radio，几选一时，需要有相同的name名称

 

例：<input type=”radio” name=”sc”>男

 

      <input type=”radio” name=”sc”>女

 

※Name同样时，这样才能在男 女中只能选择一个

 

文本域textarea

 

创建一个可以输入多行的文本框

 

<textarea name=””  id=””  class=””  cols=”30” row=”10”></textarea>

 

此功能经常用在淘宝页面的评论中

 

下拉菜单

 

<select name=””  id=”” size=”4”(属性：选择显示全部) multiple(可以选择全部) selected(默认选中)>

 

<option value=””>川菜</option>

 

<option value=””>粤菜</option>

 

<option value=””>鲁菜</option>

 

<option value=””>湘菜</option>

 

fildset定义域

 

主要用于管理系统

 

<fieldset style=”width :60px”>

 

<legend>学生系统</legend>

 

学号：<input type=”text”>

 

密码：<input type=”text”>

 

其他表单元素

 

7、label元素(点击文字也可以选中)

 

属性for=相关标记的id

 

<input type="radio"id="man"name="sex"/>

 

<label for="man">男</label>

 

<input type="radio"id="women"name="sex"/>

 

<label for="women">女</label>