常见表单

最新推荐文章于 2024-03-26 22:19:00 发布

麦克斯-侯

最新推荐文章于 2024-03-26 22:19:00 发布

阅读量503

点赞数

分类专栏：课程笔记

课程笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

名词：

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

method：表单的提交方式可以采取以下两种方式 get和post

ID：对元素进行唯一标示，用于定位。

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

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

name：当用户向表单输入信息时，服务器需要知道每条数据被输入到了那个表单控件。每个表单控件都需要一个name特性，这个特性的值对表单控件进行标识并与输入的信息一同传送到服务器。

maxlength：用来限制文本输入区域的字符数量。

type=“password”：建立一个字符被掩盖的文本框。

type=“radio”：单选按钮只让用户在一系列选项中选择其中一个。

type=“file”这个类型的input会创建一个后面附有Browse按钮的类似文本框的控件。点击会打开一个新窗口来让用户在计算机上选择一个文件上传到网站。

type=“submit”提交按钮用来将表单发送到服务器。

type=“image”用图片作为提交按钮

type=“hidden”一个隐藏控件。不会显示出来，但能用浏览器检查功能查看。

type=“date”创建一个日期输入控件

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

type“url”同type=“email”。

type=“email”

type=“search”建立搜索单行文本框

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

checked：checked特性可用来指定当页面加载时哪个值（如果有的话）会被选中。这个特性的值为checked，同一组中的单选按钮只能有一个使用此特性。

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

<button>可以让用户更好的控制按钮的显示方式，并允许其他元素出现在<button>元素内。意味着可以在起始标签和结束标签之间结合使用文本和图像。

for：用来声明标签控件标注的是哪个表单控件

<fieldset>可将相关的表单控件置于<fieldset>元素中分成一组。大多数浏览器会显示一条边缘线，只能通过css调整和修改。

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

placeholder：在文本框输入文字之前显示的就是placeholder特性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单1</title>
</head>
<body>
<h1>表单结构</h1>
<form action="http://www.example.com/subscribe.php" method="get">
    <p>This is shere the form controls will appear</p>
</form>
<hr>
<h1>单行文本框</h1>
<form action="http://www.example.com/login.php">
    <p>Username
        <input type="text" name="username" size="15" maxlenth"30"/>
    </p>
</form>
<hr>
<h1>密码框</h1>
<form>
    <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>
<hr>
<h1>文本域（多行文本框）</h1>
<form action="http://www.example.com/comments.php">
    <p>What did you think of this gig?</p>
    <textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
</form>
<hr>
<h1>单选按钮</h1>
<form action="http://www.example.com/profile.php">
    <p>Please select your favorite ganre:
        <br/>
        <input type="radio" name="genre" value="rock" checked="checked"/>Rock
        <input type="radio" "radio" name="genre" value="pop"/>POP
        <input type="radio" name="genre" value="jazz"/>Jazz
    </p>
</form>
<hr>
<h1>复选框</h1>
<form action="http://www.example.com/profile.php">
    <p>Plese select your favorite service(s):
        <br/>
        <input type="checkbox" name="service" value checked="checked"/>iTunes
        <input type="checkbox" name="service" value="lastfm"/>Last.fm
        <input type="checkbox" name="service" value="spotify"/>Spotify
    </p>
</form>
<hr>
<h1>下拉列表框</h1>
<form action="http://www.example.com/profile.php">
    <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="coputer">Computer</option>
</form>

</body>
<h1>多选框</h1>
<form action="http://www.example.com/profile.php">
    <p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
    <select name="instruments" size="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>
<hr>
<h1>文件上传域</h1>
<form action="http://www.example.com/upload.php" method="post">
    <p>Upload your song in MP3 format:</p>
    <input type="file" name="user-song" /><br />
    <input type="submit" value="Upload" />
</form>
<hr>
<h1></h1>
<h1>提交按钮</h1>
<form action="http://www.example.com/subscribe.php">
    <p>Subscribe to our email list:</p>
    <input type="text" name="email" />
    <input type="submit" name="subscribe" value="Subscribe" />
</form>
<hr>
<h1>图像按钮</h1>
<form action="http://www.example.org/subscribe.php">
    <p>Subscribe to our email list:</p>
    <input type="text" name="email" />
    <input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>
<hr>
<h1>按钮和隐藏控件</h1>
<form action="http://www.example.com/add.php">
    <button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
    <input type="hidden" name="bookmark" value="lyrics" />
</form>
<hr>
<h1>标签表单控件</h1>
<form action="http://www.example.com/subscribe.php">
    <label>Age: <input type="text" name="age" /></label>
    <br/ >
    Gender:
    <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>
</form>
<hr>
<h1>组合表单元素</h1>
<form action="http://www.example.com/subscribe.php">
    <fieldset>
        <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>
    </fieldset>
</form>
<hr>
<h1>HTML5:表单验证</h1>
<form action="http://www.example.com/login/" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" required="required" /><br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required="required" />
    <input type="submit" value="Submit" />
</form>
<hr>
<h1>HTML5:日期</h1>
<form action="http://www.example.com/bookings/" method="post">
    <label for="username">Departure date:</label>
    <input type="date" name="depart" />
    <input type="submit" value="Submit" />
</form>
<hr>
<h1>HTML5:电子邮箱和URL输入控件</h1>
<form action="http://www.example.org/subscribe.php">
    <p>Please enter your email address:</p>
    <input type="email" name="email" />
    <input type="submit" value="Submit" />
</form>
<hr>
<h1>HTML5:搜索输入控件</h1>
</html>