目录

​​1、<form> 标签​​

​​2、<input > 标签​​

​​3、<select> 标签与 <option> 标签​​

​​4、<textarea> 标签​​

​​5、实现注册账号功能：​​

1、<form> 标签

<form> 标签代表一个表单，表单用于向服务器传输数据，<form> 标签能够包含 <input>,可以是文本字段，复选框，单选框或提交按钮等，还可以包含 <textarea><select>等。<form> 常用属性：


  • name：用于定义表单名称
  • action：用于规定提交表单时向何处发送表单数据
  • method：用于规定提交的方案，一般取值 POST 或 GET

POST与GET方式的区别：


  • get 方式只能少量数据，而 post 可以携带大数据（文件上传）
  • get 方式提交时，数据会在地址栏上显示，安全性差；post 方式不会在地址栏上显示，安全性高

2、<input > 标签

<input > 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。<input> 标签 type 属性值：

【1】text

<input type="text">：定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符，常用属性有：


  • name：定义标签名称
  • value：定义标签值
  • size：定义输入字段的长度
  • maxlength：定义输入最大字符个数

【2】password

<input type="password">：定义密码字段，该字段中的字符被掩码，常用属性有：


  • name：定义标签名
  • value：定义标签值
  • size：定义输入字段的长度
  • maxlength：定义可输入最大字符个数

【3】radio

<input type="radio">：定义单选按钮，常用属性有：


  • name：定义标签名。注：对于单选按钮，如果要想做到单一选择，多个 radion 的 name 值必须一样
  • value：定义标签值
  • checked：定义标签默认被选中

【4】checkbox

<input type="checkbox">：定义复选框，重用属性有：


  • name：定义标签名称。注：一组的checkbox它们的name值应该是一样的
  • value：定义标签值
  • checked：定义该标签默认被选中

【5】button

<input type="button">：定义可点击按钮（多数情况下用于通过 JavaScript 启动脚本），常用属性有：


  • name：定义标签名称
  • value：按钮显示名称

【6】hidden

<input type="hidden">：定义隐藏的输入字段，常用属性有：


  • name：定义标签名称
  • value：定义标签值

【7】file

<input type="file">：定义输入字段和“浏览”按钮，供文件上传，常用属性有：

  • name：定义标签名称

【8】submit

<input type="submit">：定义提交按钮，提交按钮会把表单数据发送到服务器，常用属性有：


  • name：定义标签名
  • value：定义按钮显示名称

【9】reset

<input type="reset">：定义重置按钮，重置按钮会清楚表单中的所有数据，常用属性有：


  • name：定义标签名称
  • value：定义按钮显示名称

【10】image

<input type="image">：定义图像形式的提交按钮，这个标签主要是用了替换 submit 按钮，因为默认产生的提交按钮不美观，这个标签允许采用指定的图片作为提交按钮，常用属性有：


  • name：定义标签名称
  • src：定义作为提交按钮显示的图像的URL
  • alt：定义作用图像的替代文本

3、<select> 标签与 <option> 标签

【1】<select>

用于定义一个下拉列表，常用属性有：


  • name：定义下拉列表的名称
  • size：定义下拉列表中可见选项的数目
  • multiple：定义可选择多个选项

【2】<option>

用于定义下拉列表的选项，<option> 需要位于 <select> 标签内部，常用属性有：


  • value：定义送往服务器的选项值
  • selected：定义选项为选中状态

4、<textarea> 标签

<textarea> 标签用于定义一个多行文本输入控件（多行文本框，文本域），常用属性有：


  • name：定义多行文本框名称
  • cols：定义多行文本框可见宽度
  • rows：定义多行文本框可见行数
  • wrap：规定多行文本框中文字如何换行

<html>
  <head>
    <title>我的主页</title>
  </head>
  <body>
    <form action="hello.html">  <!--提交到hello.html-->
      用户：<input type="text" name="user"/><br/>
      密码：<input type="password" name="paw"/><br/>
      性别：<input type="radio" name="sex" value="nv" checked="checked"/>女<input type="radio" name="sex" value="nan"/>男<br/> <!--单选框-->
      爱好：<input type="checkbox" name="love" value="yumao"/>羽毛球<input type="checkbox" name="love" value="PP"/>乒乓球<br/>   <!--复选框-->
      文件：<input type="file"/><br/>
      生日：<select>   <!--下拉框-->
          <option>1995</option>
          <option>1996</option>
          <option>1997</option>
          <option>1998</option>
      </select><br/>
      自我描述：<textarea cols="20" rows="10"></textarea><br/>
      隐藏项：<input type="hidden"><br/>
      <input type="submit"/><br/>   <!--提交按钮-->
      <!--<input type="image" src="main2.jpg">-->
      <input type="reset"/>   <!--重置按钮-->
      <input type="button"/>
    </form>
  </body>
</html>

5、实现注册账号功能：

<html>
  <head>
    <title>龙星网注账号注册</title>
  </head>
  <body>
    <h1>龙星网注账号注册</h1>
    <table border="0" width="100%">
      <tr>
        <td align="right">注册邮箱：</td>
        <td><input type="text" name="mail"/></td>
      </tr>

      <tr>
        <td>&nbsp</td>
        <td>你还可以使用<a href="#">账号</a>注册或者<a href="#">手机号</a>注册</td>
      </tr>

      <tr>
        <td align="right">真实姓名:</td>
        <td><input type="text" name="name"/></td>
      </tr>

      <tr>
        <td align="right">性别:</td>
        <td><input type="radio" name="sex" value="nv" checked="checked"/>女<input type="radio" name="sex" value="nan"/>男</td>
      </tr>

      <tr>
        <td align="right">生日:</td>
        <td>
          <select>    <!--下拉框-->
          <option>1995</option>
          <option>1996</option>
          <option>1997</option>
          <option>1998</option>
          </select>年

          <select>    <!--下拉框-->
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          </select>月

          <select>    <!--下拉框-->
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          </select>日
        </td>
      </tr>

      <tr>
        <td align="right">学历:</td>
        <td>
          <select>    <!--下拉框-->
          <option>专科</option>
          <option>本科</option>
          <option>硕士</option>
          <option>博士</option>
          </select>
        </td>
      </tr>

      <tr>
        <td>&nbsp</td>
        <td>
          <img src="1.png" width="200" height="50"/><a href="#">看不清换一张？</a>
        </td>
      </tr>

      <tr>
        <td align="right">验证码:</td>
        <td><input type="text" name="try"/></td>
      </tr>

      <tr>
        <td>&nbsp</td>
        <td><input type="image" src="1.png" width="200" height="50"/></td>
      </tr>
    </table>
  </body>
</html>

效果如下：

HTML 表单标签_标签名