第三章

第三章##

表单

1.表单

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="name" value="提交"/>
      <input type="reset" name="name" value="重填"/> 
   </p>
</form>
注：“method”规定如何发送表单数据，常用“get”,“post”;（常用post）
    “action”表示向何处发送表单数据

2.表单元素

1.表单元素格式（input）
<input type="text" name="name" value="text"/>
注：“type”，指定元素的类型；（默认为text）
    “name”，表单元素的名称；
    “value”，表单元素的初始值；
    “size”，指定表单元素的初始宽度；
    “maxlength”，“type”为“text”或“password”时，输入的最大字符数；
    “checked”，“type”为“radio”或“checkbox”时，指定按钮是否被选中

2.文本框（text）
<input type="text" name="userName" value="用户名" size="30" maxlength="20"/>

3.密码框（password）
<input type="password" name="pass" size="20"/>

4.单选按钮（radio）（单选选项）
<input type="radio" name="gen" value="男" checked/>男
<input type="radio" name="gen" value="女"/>女

5.复选框（checkbox）（多选选项）
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked/>聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

6.列表框（select）（下拉页表 ）
<select name="列表名称" size="行数">
  <option value="选项的值" selected="selected">...</option>
  <option value="选项的值">...</option >
</select>
注：“option”为选项；
    “selected="selected"”表示默认选中该项

7.按钮
重置按钮（reset）
<input type="reset" name="butReset" value="reset按钮"/>

提交按钮（submit）
<input type="submit" name="butSubmit" value="submit按钮"/>
注：当“input type="image"”时，该提交按钮为图片按钮

普通按钮（button）
<input type="button" name="butButton" value="button按钮"/>

8.多行文本域（textarea）
<textarea name="showText" cols="x" rows="y">文本内容</textarea>
注：“cols”为显示列数；
    “rows”为显示行数
    
9.文件域（file）
<form action="表单发送到的位置" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files"/>
  <input type="submit" name="upload" value="上传"/></p>
</form>
注：“enctype”为表单编码属性

10.邮箱（email）
<p>邮箱:<input type="email" name="email"/></p>
<input type="submit"/>

11.网址（url）
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
<input type="submit"/>

12.数字（number）
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>

13.滑块（range）
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

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

3.表单的高级应用

1.隐藏域（hidden）
<input type="hidden" value="666" name="userid">
注：隐藏域的功能为通过收集、联系、发送各个信息、多方兼容浏览器等方式，使服务器更快捷地读取信息

2.只读（readonly）和禁用（disabled）
<input type="text" name="name" value="张三" readonly>
<input type="submit" value="保存" disabled>
注：“readonl”表示只读文本框；
    “disabled”表示禁用

3.表单元素的标注
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
注：“for="id"”和“id="male"”表示表单元素的ID；
    元素表单的ID用于指向具体选项 

4.表单初级验证方法

1.placeholder
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
注：input类型的文本框提供一种提示（hint）；
    可以描述文本框期待用户输入何种内容；
    提示语默认显示，当文本框中输入内容时提示语消失；
    适合于input标签：text、search、url、email和password等类型

2.required
<input type="text" name="username" required/>
注：规定文本框填写内容不能为空，否则不允许用户提交表单；
    适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

3.pattern
<input type="text" name="tel" required pattern="^1[358]\d{9}"/>
注：用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单；
    “pattern="^1[358]\d{9}"”为验证规则，正则表达式，实际使用中根据需要选用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UH36XMNd-1610870216007)(D:\笔记\表单.PNG)]