HTML学习笔记（九）表单

最新推荐文章于 2023-07-13 11:14:39 发布

慕林溪

最新推荐文章于 2023-07-13 11:14:39 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/SGZ_06_666666/article/details/51037802

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

表单<form>

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，并用于向服务器传输数据的元素。

表单标签：

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择(下拉)列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮

表单组件标签：

文本框 <input type="text"/>
密码框 <input type="password"/>
单选按钮 <input type="radio"/>
多选框 <input type="checkbox"/>

下拉列表框

<select> 描述一个下拉框
<option></option> 描述一个下拉项
<option></option>
</select>

多行文本框

<textarea cols="..." rows="..." ></textarea>
提交按钮   <input type="submit" value="按钮上的字"/>
重置按钮   <input type="reset" value=" ......"/> 把表单组件恢复为默认状态。
普通按钮   <input type="button" value=" ...... "/>

HTML 表单

type：当type值设置为submit时，按钮才有提交作用。
(注意：只有含有name属性的表单组件，才可以在点击提交按钮时传递参数（name属性值作为参数名称）)
value：按钮上显示的文字
输入标签<input>
输入类型是由类型属性（type）定义的。经常被用到的输入类型如下：
文本域：type="text"
密码字段：type="password" (密码字段字符不会明文显示，而是以星号或圆点替代。)
单选按钮：type="radio"   （设置相同的name属性，把单选按钮规定为同一组，就实现单选。如：下面单选框小栗子中两个radio类型input的name都为“Sex”）
复选框：type="checkbox" (用户可从若干给定的选择中选取一个或若干选项)
提交按钮：type="submit"    （submit：把整张表单收集的数据提交给服务器）
重置按钮：type="reset" （把表单组件恢复为默认状态。） ----提交与重置必须在一个from表单标签里。
表单的动作属性：
action="xxxxxx.xxx"    当用户单击提交按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名/目标地址。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<form name="input" action="xxx.html" method="get">
   Username: 
   <input type="text" name="user" value="慕林溪" />
   <input type="submit" value="Submit" />
</form>
</body>
</html>

浏览器显示如下：

（文本框默认值直接在value属性里面添加即可。）

type：当type值设置为submit时，按钮才有提交作用。
(注意：只有含有name属性的表单组件，才可以在点击提交按钮时传递参数（name属性值作为参数名称）)
value：按钮上显示的文字

单选框小栗子：

<html>
  <body>
    <form>
    女：
      <input type="radio" checked="checked" name="Sex" value="f"/>
      <br/>
    男：
      <input type="radio" name="Sex" value="m"/>
    </form>
  </body>
</html>

(提交的时候，提交的参数的参数名是name属性值，参数值是value属性值)
(单选按钮的默认选中：在input里添加checked="checked")

复选框小栗子：

<html>
  <body>
    <form>
    爱好：
      <pre>        <input type="checkbox"name="reading book" value="reading book"/>看书</pre>
      <pre>        <input type="checkbox"name="singing" value="singing"/>唱歌</pre>
    </form>
  </body>
</html>

使用了 pre 标签对空行和空格进行控制。还可以使用<span>&nbsp&nbsp&nbsp</span>
(复选框的默认选中：在input里添加checked="checked")

下拉列表小栗子：

<html>
  <body>
    <form>
      <select name="city">
        <option value="Beijing">Beijing</option>
        <option value="Shanghai" selected="selected">Shanghai</option>
        <option value="Hongkong">Hongkong</option>
        <option value="Lundon">Lundon</option>
      </select>
    </form>
  </body>
</html>

通过在某个option标签内添加selected="selected"属性，可以设定默认选项值。不设置默认第一个
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能。
(传的参数就是value的值)

文本域小栗子：

<html>
  <body>
    <textarea rows="8" cols="16"></textarea>
  </body>
</html>

cols ：多行输入域的列数。
rows ：多行输入域的行数。

<label>使用小栗子：

<!DOCTYPE HTML>  
<html>  
  <body>  
    <form>  
    <label for="Username">用户名</label>
    <input type="text" id="Username" name="username" />
    <label for="Password">密码</label>
    <input type="password" id="Password" name="password"/>
    <br />
    <label for="Male">男</label>
    <input type="radio" name="sex" id="Male" />
    <br />
    <label for="Female">女</label>
    <input type="radio" name="sex" id="Female" />
    </form>  
  </body>  
</html>

说明：

<label> 标签为 input元素定义标记。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性：如果在 label元素内点击文本，就会触发此控件。即：当用户点击“用户名” “密码” 或者“男” “女”文字时，浏览器就会自动将焦点转到相关要填写内容的表单框上。不一定非得点击输入框，或选项控件。
"for" 属性可把 label绑定到另外一个元素。<label>标签的for属性应当与相关元素的id属性相同。

<fieldset>与<legend>的使用小栗子：

<!DOCTYPE HTML>
<html>
  <body>
    <form>
      <fieldset>
        <legend align="center">健康信息</legend>
        姓名：<input type="text" />
        性别：<input type="text" />
        <br/>
        身高：<input type="text" />
        体重：<input type="text" />
      </fieldset>
    </form>
  </body>
</html>

<optgroup>使用小栗子：（把相关的选项组合在一起）

<!DOCTYPE HTML>  
<html>  
  <body>  
    <form>  
      <select>
        <optgroup label="英系车">
          <option value ="Bentley">宾利</option>
          <option value ="LOTUS">路特斯</option>
        </optgroup>
        <optgroup label="德系车">
          <option value ="Benz">奔驰</option>
          <option value ="Audi">奥迪</option>
        </optgroup>
      </select>
    </form>  
  </body>  
</html>

其中，label作用是为选项组规定描述，是必要的属性。

<html>
  <meta charset="utf-8"> 
  <head></head>
  <body>  
    <form action="http://blog.csdn.net/sgz_06_666666/article/details/51037802" method="get">
    用户名：<input type="text"/><br><br>
    密  码：<input type="password"/> <br><br>
    性  别：<input type="radio" checked="checked" name="Sex" value="男"/>     
      	  <input type="radio" name="Sex" value="女"/><br><br> 
    兴  趣：<input type="checkbox"/>唱歌
    	 <input type="checkbox"/>看书
         <input type="checkbox"/>画画<br><br>
    籍  贯：
    	<select>
    		<option>北京</option>
            <option>上海</option>
            <option>广州</option>
    	</select><br><br>
    个人简介：<br><br>
    <textarea cols="60" rows="20"></textarea><br><br><br>
    <input type="submit" value="用户注册"/>
    </form>  
  </body>  
</html>

慕林溪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（九）表单

表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，并用于向服务器传输数据的元素。表单标签：定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件)定义一个控制的标签定义域
复制链接

扫一扫