HTML 表单用于搜集不同类型的用户输入。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符
<form> 元素 HTML 表单用于收集用户输入。 文本输入
<form> First name:<br><input type="text" name="firstname"><br> Last name:<br><input type="text" name="lastname"></form>单选按钮输入
<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>提交按钮
<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form><select> 元素(下拉列表)
<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option>//预选定<option value="audi">Audi</option></select><button> 元素
<button type="button" onclick="alert('Hello World!')">点击我!</button>HTML5 增加了如下表单元素: <datalist> <keygen> <output>
<datalist> 元素为 <input> 元素规定预定义选项列表。 用户会在他们输入数据时看到预定义选项的下拉列表。 <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<form action="action_page.php"><input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist> </form>passWord输入类型 password 字段中的字符会被做掩码处理(显示为星号或实心圆)
<form> User name:<br><input type="text" name="username"><br> User password:<br><input type="password" name="psw"></form><input type=”checkbox”> 定义复选框(可以多选)
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>HTML5 增加了多个新的输入类型: color date datetime datetime-local email month number range search tel time url week 老式 web 浏览器不支持的输入类型,会被视为输入类型 text
<input type=”number”> 用于应该包含数字值的输入字段。 您能够对数字做出限制。 根据浏览器支持,限制可应用到输入字段。
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"></form><input type=”date”> 用于应该包含日期的输入字段。
<form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br></form><<input type=”color”> 用于应该包含颜色的输入字段
<form> Select your favorite color: <input type="color" name="favcolor"></form><input type=”range”> 用于应该包含一定范围内的值的输入字段。min、max、step、value
<form> <input type="range" name="points" min="0" max="10"></form><input type=”month”> 允许用户选择月份和年份 <input type=”week”> 允许用户选择周和年。 <input type=”time”> 允许用户选择时间(无时区)。 <input type=”datetime”> 允许用户选择日期和时间(有时区)。 <input type=”datetime-local”> 允许用户选择日期和时间(无时区) <input type=”email”> 用于应该包含电子邮件地址的输入字段。 <input type=”tel”> 用于应该包含电话号码的输入字段。 <input type=”search”> 用于搜索字段(搜索字段的表现类似常规文本字段)。 <input type=”url”> 用于应该包含 URL 地址的输入字段。
input属性 value 属性规定输入字段的初始值: readonly 属性规定输入字段为只读(不能修改): disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的 size 属性规定输入字段的尺寸(以字符计): maxlength 属性规定输入字段允许的最大长度:
HTML5 为 <input> 增加了如下属性: autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step 并为 <form> 增加如需属性: autocomplete novalidate
1、autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入值自动填写值 2、novalidate 属性属于 <form> 属性。如果设置,则 novalidate 规定在提交表单时不对表单数据进行验证 3、autofocus 属性是布尔属性。如果设置,则规定当页面加载时 元素应该自动获得焦点。 4、form 属性规定 <input> 元素所属的一个或多个表单 5、formaction 属性规定当提交表单时处理该输入控件的文件的 URL。formaction 属性覆盖 <form> 元素的 action 属性。 6、formenctype 属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method=”post” 的表单)。formenctype 属性覆盖 <form> 元素的 enctype 属性 7、formmethod 属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。formmethod 属性覆盖 <form> 元素的 method 属性。 8、novalidate 属性是布尔属性。如果设置,则规定在提交表单时不对 <input> 元素进行验证。 9、formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。 10、formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。formtarget 属性会覆盖 <form> 元素的 target 属性。 11、height 和 width 属性规定 <input> 元素的高度和宽度。height 和 width 属性仅用于 <input type=”image”>。 12、list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。 13、min 和 max 属性规定 <input> 元素的最小值和最大值。min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。 14、multiple 属性是布尔属性。如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。 15、pattern 属性规定用于检查 <input> 元素值的正则表达式。pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。 16、placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。该提示会在用户输入值之前显示在输入字段中。placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。 17、required 属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段。step 属性规定 <input> 元素的合法数字间隔。提示:step 属性可与 max 以及 min 属性一同使用,来创建合法值的范围。
新闻热点
疑难解答