Day 11

1月21日，今天开始跑单签到，所以每天必修要跑够10个小时40单，时间更长了，也表示要更累了晚上9点多才回来，剩下的自己的时间就更少了。
9、form 表单

html中表单的作用是很强大的。我们生活中经常要用到表单，如一些基本信息的填写。在网页中也是如此，我们免不了注册一些账号，此时用到的表单就比较多了。

表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。

表单使用标签<form>定义。

表单的基本结构：

<form name="form1" action="URL" method="get|post" target="文档显示方式">

   用户名：<input type="text" name="uname" />

   密 码：<input type="password" name="passwd" />

</form>

说明：

属性 说明

name 表单的名称

action 表单提交地址

method 表单数据提交的方式 （get:在url地址上面传送参数到服务器,post：在后台传送参数到服务器）

enctype MIME类型

target 打开方式（_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中）

（1）文本域：文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
   First name: <input type="text" name="firstname"><br>
   Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name:
Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

说明：

属性 说明

type input元素类型

name input 元素的名称

value input 元素的值

size input 元素的宽度

readonly 是否只读

maxlength 输入字符的最大长度

disabled 是否禁用

（2）密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下：

Password:

属性 说明

type input元素类型

name input 元素的名称

size input 元素的宽度

maxlength 定义最多输入的字符数

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

（3）单选按钮
<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下：

Male
Female

name属性：定义单选框的名称，要保证数据的准确获取，单选框都是以组为单位使用的，在同一组的单选按项要用同一个名称。

（4）复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

<form>
<input type="checkbox" name="song" value="听歌">听歌<br>
<input type="checkbox" name="run" value="跑步"> 跑步
</form>

浏览器显示效果如下：

听歌
跑步

（5）提交按钮

<input type="submit">定义了提交按钮.

浏览器显示效果如下：

（6）隐藏域

隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。

<input type="hidden" name="uid" value="10"/>

（7）textarea(表单元素：多行文本域)

<textarea name="content" rows="5" cols="50"> </textarea>

说明：

属性 　　说明

name 　 元素的名称

rows 　 指定文本框的高度

cols 　　　 　 指定文本框的宽度

（7）简单下拉框：

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

浏览器显示效果如下：

属性 说明

name 下拉列表框的名称

size 下拉列表框的显示行数

multiple 是否多选

disabled 是否禁用

selected 设置默认选中的选项

value 选项值

（8）lable 标签
lable 标签的作用是将输入项或选项及其标签文字关联起来。

<input type="radio" name="sex" value="1" id="male" />

         <label for="male">男</label>

         <input type="radio"  name="sex"  value="0" id="female" />

         <label for="female">女</label>

浏览器显示效果如下：

<input type="radio"， name="sex" ， value="1" ， id="male" />

     <label for="male">男</label>

     <input type="radio" name="sex" value="0" id="female" />

     <label for="female">女</label>

（9）optgroup(表单元素：下拉框分组)
optgroup 元素用于组合选项

<select name="city" multiple>

         <optgroup label="广东">

             <option value="1">广州</option>

              <option value="2">深圳</option>

        </optgroup>

       <optgroup label="其他">

            <option value="3">长沙</option>

            <option value="4">香港</option>

            </optgroup> </select>

浏览器显示效果如下：

posted @ 2025-01-22 22:04  阿伟·  阅读(16)  评论(0)    收藏  举报