html的入门——从标签开始（3）

表单：

从传统意义上来说，“表单”这个词指的是一个打印的文档，这个文档中含有一些空白区域以供填写信息。

表单结构：

<form>:

表单空间位于<form>元素中。每个<form>元素都应设置action特性，通常还要设置method特性和id特性。

action：

每个<form>元素都需要一个action特性，其特性值是服务器上一个页面的URL，这个页面要来在用户提交表单的时候接收表单中的信息。

method：

表单提交可以采用以下两种方法之一：get或post。

使用get方法时，表单中的值被附加在由action忒选哪个所指定的URL末尾。get方法适用于一下情形：

· 短表单（如搜索框）

· 只从Web服务器上检索数据的情形（不发送那些用在数据库中添加或删除的数据）

使用post方法时，表单中的值被放在HTTP头信息中进行发送。从经验上来说，如果你的表单存在以下情况，就应该使用post方法：

· 允许用户上传文件

· 非常长

· 包含敏感信息（如密码等）

· 像数据库中添加信息，或是从数据库中删除信息。

PS：如果没有使用method特性，表单中的数据将采用get方法发送。

单行文本框：

<input>：

<input>元素用来创建多种不同的表单控件，其type特性的值决定了它将要创建哪种控件。

type=“text”：
当type特性的值为text时，<input>元素会创建一个单行文本框。

name：

当用户向表单中输入信息时，服务器需要知道每条数据被传输到了哪个表单控件。例如，在一个登陆表单中，服务器需要知道哪条数据是作为用户名输入的，哪条数据是提供密码的。

因此，每个表单控件都需要一个name特性，这个特性的值对表单控件进行标识并与输入的信息一同传输到服务器。

size:

size特性不能在新表单中使用，他只在旧的表单中用来指定文本框的宽度（根据可见的字符数量来衡量）。

maxlenth：
可使用maxlenth特性来限制用户在文本区域输入字符的数量，它的值为用户可以输入字符的最大数量。

<form action="">
    <p>Username:
    <input type="text" name="username" size="15" maxlength="30" />
    </p>
</form>

密码框：

type=“password”：

当type特性的值为password时，<input>元素会创建一个用起来和单行文本框非常类似的文本框，唯一不同之处案子与其中的字符被掩盖了。

<form action="">
    <p>
    Username:
    <input type="text" name="username" size="15" maxlength="30"/>
    </p>
    <p>Password:
    <input type="password" name="password" size="15" maxlength="30" />
    </p>
</form>

文本域（多行文本框）：

<textarea></textarea>：

<textarea>元素用来创建多行文本框。与其他input元素不同，<textarea>元素并非空元素，因此它包含起始标签和结束标签。

<form action="">
    <p>What did you think of this gig?</p>
    <textarea name="comments" cols="20" rows="4">Enter your comments</textarea>
</form>

单选按钮：

type="radio":

单选按钮只让用户从一系列选项中选择其中一个。

value：

value特性为选项指定了被选中时要发送到服务器的值。同一组中的每个按钮的值应该各不相同（这样服务器才能知道用户选择了哪个选项）。

checked:

checked特性可以用来指定页面加载时哪个值被选中。这个特性的值为checked，同一组中的单选按钮只能有一个使用此特性。

<form action="">
    <p>Please select your favorite genre:
        <br/>
    <input type="radio" name="genre" value="rock" checked="checked" />Rock
    <input type="radio" name="genre" value="pop" />Pop
    <input type="radio" name="genre" value="jazz" />Jazz
    </p>
</form>

复选框：

type=“checkedbox”：

复选框允许用户在回答一个问题时选择一个或多个选项。

<form accept="">
    <p>Please select your favorite music service(s):
        <br/>
        <input type="checkbox" name="service" value="itunes" />Itunes
        <input type="checkbox" name="service" value="last.fm" />Last.fm
        <input type="checkbox" name="service" value="spotify" />Spotify
        </p>
</form>

下拉列表框：

<select></select>:

下拉列表框让用户在一个下拉列表中选择其中一个喧嚣。

<select>元素用来创建下拉列表框，它包含了两个或两个以上的<option>元素

<option></option>:

<option>元素用于指定用户可以选择的选项。在起始标签<option>和结束标签</option>之间的文字将显示在下拉列表框中。

selected：

selected特性可以用来指定当前页面加载时被选中的选项。selected特性的值应该是seleced。

如果没有使用selected特性，那么在页面加载时，下拉列表框显示的将是第一个选项。如果用户没有选择任何选项，那么列表中的第一个选项将作为这个控件的值被传输到服务器。

multiple=“multip”：

可以通过添加multip特性（并将该特性设置为multip）来允许用户从这一列表中选择多个选项。

<form action="">
    <p>What device do you listen to music on?</p>
    <select name = "devices">
        <option value="ipod">iPod</option>
        <option value="radio">Radio</option>
        <option value="computer">Computer</option>
        </select>
</form>
<form action="">
    <p>Do you play any of the following instruments?(You can sekect more than one option by holding down control on
    a PC or command key on a Mac while selecting different option.)</p>
    <select name="instruments" siez="3" multiple="multiple">
        <option value="guitar" selected="selected">Guitar</option>
        <option value="drums">Drums</option>
        <option value="keyboard" selected="selected">Keyboard</option>
        <option value="bass">Bass</option>
    </select>
</form>

文本上传域：

type=“file”：

这个类型的input会创建一个后面附有Browse按钮的类似文本框的控件。当用户单机Browse按钮时，会打开一个新窗口让用户从他们的计算机上选择一个文件上传到网站。

如果允许用户上传文件，必须将<form>元素上的method特性值设置为post。

<form action="" method="post">
    <p>Upload your song in MP3 format:</p>
    <input type="file" name="user-song" size="50"/><br/>
    <input type="submit" value="Upload"/>
    <br/><br/>
</form>

提交按钮：

type=“submit”：

提交按钮用来将表单发送到服务器。

标签表单控件：

<label></label>：

在使用表单控件的时候，可以直接通过表单控件旁边的文本说明他的作用并以此保持代码的整洁。但是，每个表单控件最好使用相应的<label>元素来代替简单的文本，

因为这样一来，表单将会更加清晰。

<label>Age: <input type="text" name="age" size="10"/></label>
<br/>
Gendder:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>

 组合表单控件：

<fieldset></fieldset>：

可将相关的表单控件置于<fieldset>元素中分成一组。这对长表单来说特别有用。

<legend></legend>:

<legend>元素可以直接跟在起始标签<fieldset>的后面并且包含一个标题，这个标题用来帮助用户理解控件组的用途。

<fieldset>
<br/>
<legend>Contact details</legend>
<label>Email:<br/>
<input type="text" name="email" /></label/><br/>
<label>Mobile:<br/>
<input type="text" name="mobile" /></label/><br/>
<label>Telephone:<br/>
<input type="text" name="telephone" /></label/><br/>
</fieldset>

HTML5：表单验证：

通常情况下，表单验证时通过JavaScript实现的。但HTML5引入了眼睁睁机制并将这一工作交给浏览器完成。

验证过程可以确保在表单提交后服务器能够i理解用户在表达那中所填信息。在表单发送到服务器之前对表单的内容进行验证有助于：
· 减少服务器工作　　 · 让用户认识到表单是否存在问题时要比由服务器完成验证更快

<form action="" method="post">
<label for="username">Username:</label>
<input type="text" name="username" required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password" required="required" />
<input type="submit" value="Submit" />
<br />
</form>

HTML5：日期控件

type=“date”：

如果要求用户提供日期，你可以使用<input>元素并将其type特性值设为date。这回在支持HTML5新输入类型的浏览器上创建一个日期输入控件。

<form action="" method="post">
<label for="username">Departure date:<label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>

HTML5：电子邮件和URL输入:

type="email":

如果需要用户提供电子邮件地址，你可以使用电子邮件输入控件。哪些支持HTML5验证机制的浏览器将检查用户是否提供的信息是不是一个格式正确的电子邮件地址。

type=“url”：

如果需要用户提供网页地址，你可以使用URL输入控件。哪些支持HTML5验证机制的浏览器将检查用户是否提供的信息是不是一个格式正确的URL格式。

<form action="">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>

<form action="">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" name="Submit" />
</form>

HTML5：搜素输入控件：

type=“search”：

如果你想为搜索查询创建一个单行文本框，可以使用HTML5提供的搜索输入控件。

要创建HTML5搜索框，应将<input>元素的type特性值设置为search。

placeholder：

在任何文本输入控件上，你还可以使用一个名为placeholder的特性，在用户单机文本输入区域之前，文本框内显示的文本就是placeholder的特性值。

<form action="">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>

<form action="">
<p>Search:</p>
<input type="search" name="search" placeholder="Enter keyword" />
<input type="submit" value="Search" />
</form>

表单示例：

<html>
    <head>
        <title>Forms</title>
    </head>
    <body>
        <form action="" method="get">
            <fieldset>
                <legend>
                    Your Details:
                </legend>
                <label>
                    Name:
                    <input type="text" name="name" size="30" maxlength="100">
                </label>
                <br />
                <label>
                    Email  :
                    <input type="email" name="email" size="30" maxlength="100">
                </label>
                <br />
            </fieldset>
            <br />
            <fieldset>
                <legend>
                Your Review:
                </legend>
                <p>
                    <label for="hear-about">
                        How did you hear about us?
                    </label>
                    <select name="referrer" id="hear-about">
                        <option value="google">Google</option>
                        <option value="friend">Friend</option>
                        <option value="advert">Advert</option>
                        <option value="other">Other</option>
                    </select>
                </p>
                <p>
                Would you visit again?
                <br />
                <label>
                    <input type="radio" name="rating" value="yes" />
                    Yes
                </label>
                <label>
                    <input type="radio" name="rating" value="no" />
                    No
                </label>
                <label>
                    <input type="radio" name="rating" value="maybe" />
                    Maybe
                </label>
                </p>
                <p>
                    <label for="comments">
                    Comments:
                    </label>
                    <br />
                    <textarea rows="4" cols="40" id="comments">
                    </textarea>
                </p>
                <label>
                    <input type="checkbox" name="subscribe" checked="checked" />
                    Sign me up for email updates
                </label>
                <br />
                <input type="submit" value="Submit review" />
            </fieldset>
        </form>
    </body>
</html>

转载于:https://www.cnblogs.com/banbianfengxue/p/10539896.html