HTML+CSS笔记 11：HTML 表单

表单

用于将本地的数据提交给远程的服务器

<!-- 
   使用 form 标签来创建一个表单
       action 属性：表单要提交的服务器的地址
-->
<form action="../html/page.html">
    <!-- 
    	name 属性：要提交到服务器的数据必须指定的属性，表示参数的名字 
    	value 属性：文本框中输入的内容
    	outline 设置输入框的外边框
    -->
    文本框：<input type="text" name="username">
    <br><br>
    
    密码框：<input type="password" name="password">
    <br><br>
    
    <!-- 
    	选择框需要指定 value 属性，作为用户填写的参数值传递给服务器
    	checked 属性：可以将按钮设置为默认选中
     -->
    单选按钮：
    男<input type="radio" name="sex" value="male">
    女<input type="radio" name="sex" value="female" checked>
    <br><br>
    
    多选按钮：
    默读<input type="checkbox" name="book" value="zd">
    杀破狼<input type="checkbox" name="book" value="cg">
    残次品<input type="checkbox" name="book" value="ll">
    <br><br>
    
    <!-- select 属性：设置默认选中 -->
    下拉列表
    <select name="character">
    	<option value="jc">靳丞</option>
    	<option selected value="tc">唐措</option>
    	<option value="lm">冷缪</option>
    	<option value="ry">荣弋</option>
    </select>
    <br><br>
    <!-- value 属性：可以指定按钮上的文字 -->
    提交按钮：<input type="submit" value="确定">
</form>

<form action="../html/page.html">
	文本框：<input type="text" name="username">
	<br><br>
	关闭自动补全：<input type="text" name="username" autocomplete="off">
	<br><br>
	<!-- 只读数据会提交，禁用数据不会提交 -->
	设置只读：<input type="text" name="username" value="233333" readonly>
	<br><br>
	设置禁用：<input type="text" name="username" value="233333" disabled>
	<br><br>
	获取焦点：<input type="text" name="username" autofocus>
	<br><br>
	
	颜色：<input type="color" name="color">
	<br><br>
	
	邮箱：<input type="email" name="email">
	<br><br>
	
	<!-- 提交表单按钮 -->
	<input type="submit" value="提交">
	<!-- 普通的可以点击的按钮 -->
	<input type="button" value="确定">
	<!-- 重置按钮，重置表单项的值为默认值 -->
	<input type="reset" value="重置">
	<br><br>
	
	<!-- 上面三个按钮等同于 -->
	<button type="submit">提交</button>
	<button type="button">确定</button>
	<button type="reset">重置</button>
</form>