html（五）表单

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交">
      <input type="reset" name="Reset" value="重填"> 
   </p>
</form>

form：表单标签
method：规定如何发送表单数据 {get(明文提交) | post（密文提交）}
action：表示向何处发送表单数据

表单元素
- text文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20"  minlength="10">

type：input（表单元素）元素类型 type 为 radio时必须指定一个值
name：Input元素名称
value：Input元素的值（元素的初始值）
size：指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text 或 password 时，输入的最大字符数
minlength：type为text 或 password 时，输入的最少字符数

password密码框

<input  type="password "  name="pass"  size="20" >

radio 单选按钮

<input name="gen" type="radio" value="男"  checked="checked" >男
<input name="gen" type="radio" value="女" >女

checked：type为radio或checkbox时，指定按钮被选中（可以简写为checked）

checkbox复选框

<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戏

同一组复选框name名称一样

按钮

//reset重置按钮
<input  type="reset" name="butReset" value="reset按钮">
//submit提交按钮（无刷新）
<input  type="submit" name="butSubmit" value="submit按钮">
//button提交按钮(页面刷新)
<input  type="button" name="butButton" value="button按钮"/>

select列表框

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">选项内容</option >
<option value="选项的值">选项内容</option >
</select>

option：列表选项
selected：列表项默认选中状态（可以简写为selected）

file文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
</form>

enctype=”multipart/form-data”：有文件上传时表单添加的属性

隐藏域

<input type="hidden" value="666" name="userid">

textarea多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

cols：宽度
rows：高度

只读和禁用、占位符

<input name="name" type="text" value="张三"  readonly="readonly">
<input type="submit "  disabled="disabled"  value="保存" >
<input type="text" name="username" placeholder="请输入用户名" value="">

readonly：添加只读属性
disabled：禁用属性

语义化的表单
语义化的目标是为了页面结构更加合理
在网页设计和开发过程中，使用语义化的标签，能够达到见名知义的作用
语义化的结构，更加符合Web标准，更利于搜索引擎的抓取（SEO的优化）和开发维护

<form action="" method="post" >
    <fieldset>
        <legend>用户信息</legend>
            姓名：<input type="text"/>
            ……
    </fieldset>
</form>

fieldset：域
legend：域标题

表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>//表单元素的id
<input type="radio" name="gender" id="male"/>//表单元素id

猜你喜欢