HTML 表单-表单域

表单

表单域

包含了文本框、密码框、隐藏域、复选框、单选框、多行文本框、下拉选择框和文件上传框等。

• 文本框：属性text，是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
• 密码框：属性password，是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
• 数字框: 用于数字选择。
• 邮箱框：属性email，无@符号时会提示错误。
• 隐藏域：属性hidden，是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。 当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
• 复选框：属性checkbox，许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。 checked 属性高设置默认选中
• 单选框：属性radio，当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。 必须写上相同的name值才能每次选中一个，checked 属性高设置默认选中

<form action="http://httpbin.org/post" method="post">
        <!-- 文本框 placeholder文本框内容-->
        <input type="text" name="user" placeholder="请输入用户名"><br>
        <!-- 密码框 -->
        <input type="password" name="password" placeholder="请输入密码"><br>
        <!-- 数字框 -->
        <input type="number" name="age" placeholder="输入年纪"><br>
        <!-- 邮箱框 -->
        <input type="email" name="email" placeholder="输入邮箱"><br>
        <!-- 单选框 
            chexked默认选中
            单选框写value-->
        <span>性别：</span><span>男</span><input checked type="radio" name="sex" value="man">
        <span>女</span><input type="radio" name="sex" value="woman"><br>
        <!-- 复选框 
            chexked默认选中
            单选框写value-->
        <span>爱好：</span><span>篮球</span><input checked type="checkbox" name="hobby" value="basketball">
        <span>足球</span><input type="checkbox" name="hobby" value="football"><br>
        <input type="submit" value="注册">
    </form>

*下拉选择框：下拉选择框允许你在一个有限的空间设置多种选项。

<!-- option 中selected属性设置默认选中项 -->
<select name="address">
				<option>河南</option>
				<option>河北</option>
				<option>山东</option>
				<option>安徽</option>
				<option>广东</option>
			</select>

表单按钮

包括提交按钮、复位按钮和一般按钮；

• 表单按钮：submit，表单按钮控制表单的运作 提交按钮 提交按钮用来将输入的信息提交到服务器。
• 复位按钮：reset，复位按钮用来重置表单。

<select name="addr" id="addr">
				<option value="henan">河南</option>
				<option value="hebei">河北</option>
				<option value="shandong">山东</option>
				<option value="anhui">安徽</option>
				<option value="guangdong">广东</option>
			</select>
			<br>
			<textarea name="info" rows="1" cols="30"></textarea>
			<br>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>