HTML 表单与输出

我们先来设置一个简单的表单

<！doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>一个简单的表单</title>
</head>
<body>
          <form>
                    姓：
                    <input type="text" name="lastname">
                    <br/>
                    名：
                    <input type="text" name="firstname"> 
          </form>
</body> 
</html>

form是表单的标签。input是输入的意思。type是类型的意思。text是文本的意思

type=text代表一个文本框，可以输入文字字母等。

框内的属性

name在着表单中是表单内的意思

name=lastname在文本框输入姓

name=firstname在文本框输入名

<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>输出密码试试看</title>
</head>
<body>
           <form>
                     用户：
                     <input type="text" name="user" placeholder="用户名">
                     <br />
                     密码：
                     <input type="password" name="password" placeholder="密码">
           </form>
</body>
</html>

将password设置到类型处，所输入的文本就是隐藏的了。大多数的浏览器中文本区域最多输入20个字符。这里英文type类型不一样所以会导致表单长度不一样。 placeholder后面是显示在空格内的字符。提示用户输入。

<!doctype html>
<html>
<head>
            <meta charset="utf-8>
            <title>选项式表单x</title>
</head>
<body>
           <form>
                      <input type="radio" name="sex" value="male" />male
<br />
                      <input type="radio" name="sex" value="female" />famale
           </form>
</body>
</html>

type=radio类型等于单项选择的意思，name="sex"等于性别的意思。value="选项内容"

<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>多项选择表单</title>
</head>
<body>
           <p>你喜欢什么？</p>
           <form>
                     <input type="checkbox" name="代码"/>
                      我喜欢代码
                     <br/>
                     <input type="checkbox" name="上网"/>
                      我喜欢上网
                     <br/>
                     <input type="checkbox"name="跑步"/>
                      我喜欢跑步
           </form>
</body>
</html>

type="checkbox"这是多项选择表单。

<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>表格的动作属性和确认按钮</title>
</head>
<body>
           <form name="input" action="后端地址" meahod="get">
           用户名：
           <input type="text" name="user"/>
           <input type="submit" value="提交">
           </form>
</body>
</html>

action链接后端的地址。meahod=get从服务器获取数据.

<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>带有预选值的下拉列表</title>
</head>
<body>
<form>
           <select name="汽车">
           <option value="奔驰'>奔驰</option>
           <option value="宝马">宝马</option>
           <option value="奥迪"selected="selected" >奥迪</option>
           <option value="法拉利">法拉利</option>
</form>
</body>
</html>

select是选择的意思，制作下拉列表表单。option是列表中选项的意思。selected是列表预选的意思。在打开下拉列表选项时它会优先选择。

<!doctype html>
<html>
<head>
           <meta charset="utf-8">
           <title>关于表单的文本域以及按钮</title>
</head>
<body>
          <form>
                    <textarea rows="10" cols="30">
                                     在这个区域可以输入的文本将没有限制
                    </textarea>
                    <input type="button" value="我是按钮快来点我">
          </form>
</body>
</html>

　其中：textarea=文本 rows等于文本域长度cols等于文本域的宽度。

type是按钮的意思，value=按钮内容。

这张图最上面的手机号注册背景class="zbar"