3 表单详解
Posted xuanjian-91
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3 表单详解相关的知识，希望对你有一定的参考价值。
html表单 为什么： 提交数据给后台 <form> <input> 元素是最重要的表单元素，每个<input>元素必须写一个 name 属性，不然不会被提交 组合表单元素<fieldset> <form action="action_page.php" method="GET> <fieldset>//组合表单的输入元素 <legend>Personal information:</legend>//组合后的名字 <input type="text" name="firstname">//输入input元素必须设置一个 name 属性，不写name的input元素不会被提交 <input type="radio" name="sex" value="male" checked>Male <input type="submit" value="Submit"> </fieldset> </form> html表单元素 元素种类： <input>输入元素 <textarea> 多行文本输入元素 <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> <button> <button type="button" onclick="alert(‘Hello World!‘)">Click Me!</button> <datalist> 预定义选项列表 <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> </datalist> </form> <select> 下拉列表 <option> 待选择元素 <select name="cars"> <option value="volvo">Volvo</option> <option value="saab" selected>Saab</option> </select> 输入元素<input>的类型 <form> <input type="text" name="firstname"> <input type="password" name="psw"> <input type="submit" value="Submit"> <input type="radio" name="sex" value="male" checked>Male <input type="checkbox" name="vehicle" value="Bike">I have a bik <input type="button" onclick="alert(‘Hello World!‘)" value="Click Me!"> <input type="number" name="quantity" min="1" max="5"> <input type="date" name="bday"> <input type="color" name="favcolor"> <input type="range" name="points" min="0" max="10"> <input type="month" name="bdaymonth"> <input type="week" name="week_year"> <input type="time" name="usr_time"> <input type="datetime" name="bdaytime"> <input type="datetime-local" name="bdaytime"> <input type="email" name="email"> <input type="search" name="googlesearch"> <input type="tel" name="usrtel"> <input type="url" name="homepage"> </form> <input>属性,输入属性 属性 value value 属性规定元素的初始值 <input type="text" name="firstname" value="John"> readonly readonly 属性规定元素为只读（不能修改） <input type="text" name="firstname" value="John" readonly> disabled disabled 属性规定元素是禁用的 被禁用的元素是不可用和不可点击的。 被禁用的元素不会被提交 <input type="text" name="firstname" value="John" disabled> size size 属性规定输入最多多少个字符 <input type="text" name="firstname" value="John" size="40"> maxlength maxlength 属性规定元素允许的最大长度 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。 <input type="text" name="firstname" maxlength="10"> autocomplete autocomplete 属性规定表单或元素能自动完成 输入时能自动关联出用户之前填写的值 <form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> novalidate novalidate：在提交表单时不对表单数据进行验证 <form action="action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> autofocus autofocus 输入时该元素能自动获得焦点。 First name:<input type="text" name="fname" autofocus> form form 属性规定元素属于一个或多个表单 如需引用一个以上的表单，请使用“ ”空格分隔的表单 id 列表 <form action="action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> formaction formaction 属性规定向哪个 URL提交表单，会覆盖action属性 <form action="action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo_admin.asp" value="Submit as admin"> </form> formenctype formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单） formenctype 属性覆盖 <form> 元素的 enctype 属性 <form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> formmethod formmethod 属性定义get方式还是post方式提交给action。 formmethod 属性覆盖 <form> 元素的 method 属性。 <form action="action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"> </form> formnovalidate formnovalidate属性规定在提交表单时不对 <input> 元素进行验证 formnovalidate 属性覆盖 <form> 元素的 novalidate 属性 <form action="action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form> formtarget formtarget 属性规定何处显示接收到的响应 <form action="action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form> height 和 width height 和 width 属性规定 <input> 元素的高度和宽度，仅对图片有效 把图像定义为提交按钮 <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> list list 属性引用的 <datalist> 元素id或name 设置预定义值 <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> min 和 max min 和 max 属性规定 <input> 元素的最小值和最大值 Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> multiple multiple属性规定允许用户在 <input> 元素中输入一个以上的值 <input type="file" name="img" multiple> pattern （模式） pattern属性用于检查元素中输入的值符合正则 <input type="text" name="country_code" pattern="[A-Za-z]3" title="Three letter country code"> placeholder placeholder 属性元素的输入提示。 该提示会在用户输入值之前显示在输入字段中 <input type="text" name="fname" placeholder="First name"> required required 属性规则该元素为必填项 <input type="text" name="usrname" required> step step 属性规定元素的合法数字间隔 <input type="number" name="points" step="3"> <input>元素的常用的输入限制 disabled 元素应该被禁用。 max 元素输入的最大值。 min 元素输入的最小值。 maxlength 元素输入的最大字符数。 pattern 规定通过其检查输入值的正则表达式。 readonly 该元素为只读（无法修改）。 required 该元素是必需的（必需填写）。 size 该元素的宽度（以字符计）。 step 该元素的合法数字间隔。 value 该元素的默认值。
以上是关于3 表单详解的主要内容，如果未能解决你的问题，请参考以下文章
SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段