2、表单的语法:
<form method=34;post" action="result.html">
<p> 名字:<input name="name" type="text" > </p>
<p> 密码:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表单元素解释:
type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text.
name:指定表单元素的名称.
value:元素的初始值。type 为 radio时必须指定一个值.
size:指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对付其他类型,宽度以像素为单位.
maxlength:type为text 或 password 时,输入的最大字符数.
checked:type为radio或checkbox时,指定按钮是否是当选中.
4、示例:
<html >
<head>
<title>表单元素</title>
</head>
<body>
<!-- 表单 -->
<form method="POST" action="#">
<!-- 标签 -->
<label for="username">姓名:</label>
<!-- 文本框 value属性是设置默认显示的值-->
<input id="username" value="songzetong" />
<!-- 密码框 -->
<br/><label for="pwd">密码:</label>
<input type="password" id="pwd">
<br/>
<!-- 单选框 -->
<label for="sex">性别:</label>
<input type ="radio" name ="sex" checked/>男
<input type ="radio" name ="sex"/>女
<!-- 复选框 -->
<br/>
<label for="hobby">爱好:</label>
<input type="checkbox" name ="hobby" id="hobby"/>听音乐
<input type="checkbox" name ="hobby"/>旅游
<input type="checkbox" name ="hobby"/>拍浮
<br/>
<!-- 下拉列表 -->
<label for="month">月份:</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按钮 -->
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
<br/>
<!-- 图片按钮 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
个人简介:
</label>
<!-- 多行文本域 -->
<textarea >本人已赞许什么条款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上传头像:</label>
<input type="file"/>
<!-- 邮箱 -->
<br/>
<label for="QQ邮箱">邮箱:</label>
<input type="email"/>
<br/>
<!-- 网址 -->
<label for="ur">网址:</label>
<input type="url"/>
<!-- 数字 -->
<br/>
<label for="shuzi">数字:</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑块:</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隐蔽域 -->
<br/>
<input type="hidden"value="1">
<!-- 只读:只能看不能修正,禁用:不能用 -->
<input value="我是只读的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默认提示 -->
<br/>
<input placeholder="默认提示框"/>
<br/>
<!-- 文本框内容提示不能为空,否则不许可用户提交表单(网页上的必填项) -->
<input required="必填项"/>
<button type="submit">提交</button>
<br/>
<!-- 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果图链接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html