表单的基本结构

一、表单的基本结构

1.表单的基本语法

   * <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>*

2.表单元素格式

3.表单单选按钮

基本语法

<form action="#" >
			<input type="radio" name="radio" id="" value="885"/>885<br/>
			<input type="radio" name="radio" id="" value="897"/>897<br/>
			<input type="radio" name="radio" id="" value="101.1"/>101.1<br/>
			<input type="radio" name="radio" id="" value="97.5"/>97.5<br/>
			<input type="submit" />

name要填一样才能实现单选的功能

4.表单复选框

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

5.下拉列表框

select为声明列表框，selected为默认选中项，value为选项中的值

教师 学员 工人 律师 法师


6.按钮

基本语法：

<input  type="reset" name="butReset" value="reset按钮"> //重置按钮 value值就是按钮上显示的值
<input  type="button" name="butButton" value="button按钮"/>// 普通按钮 

7.多行文本域、文件域、邮箱、网址、数字、滑块、搜索框

多行文本域：

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >//显示的行数x、显示的列数y

文件域：

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>//file表示文件域

邮箱：

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>//会自动验证邮箱的格式是否正确

网址：

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>//“url”表示要插入的网址

数字：

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>//“min”允许的数字最小值 "允许的狮子最大值" step"合法的数字间隔

滑块：

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>//注释同上

搜索框：

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>